Chào mọi người, mình có một thẻ div có id là 1,trong thẻ này mình có 2 thẻ div con cái id là 2 và id là 3. thẻ div có id là 2thì mình chèn 1 cái hình, thẻ div có id 3 mình chèn chữ , không hiểu sao chữ của thẻ div có id là 3 năm chung 1 hàng với thẻ div có id là 2. Mong mọi người giúp đỡ, cảm ơn ạ.
Hai thẻ "div" nằm cùng một hàng
Bạn giải thích khó hiểu quá @@ Bạn đưa code lên xem nào!
Bạn thử thêm dùng này vào CSS:
#noidung div{
display: block;
}
Bạn đăng hẳn code lên đây đi, tại sao lại không để được block @@ Nếu bạn muốn vậy thì đơn giản nhất là thêm tag <br> sau div ảnh.
1 Like
vâng ạ.
<html><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>VinFast</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<link rel="stylesheet" href="css.css">
<body>
<div id="wrapper">
<div id="header" class="clearfix">
<div class="wp-inner">
<a href="index.html" id="logo" class="fl-left">
<img src="images/logo.png" alt="">
</a>
<ul id="main-menu" class="fl-right">
<li><a href="index.html">Trang chủ</a></li>
<li class="active"><a href="vechungtoi.html">Về chúng tôi</a></li>
<li><a href="dongsanpham.html">Dòng sản phẩm</a></li>
<li><a href="lienhe.html">Liên hệ</a></li>
</ul>
</div>
</div>
<div id="content"><!-- InstanceBeginEditable name="content" -->
<div id="mau-nen" >
<div id="noidung">
<div id="dau-xe"><img src="images/vechungtoi-dauxe.png" alt=""></div>
<div>ádsadádsadsadasd</div>
</div>
</div>
<!-- InstanceEndEditable --></div>
<div style="clear:both; height:10px;"></div>
<div id="footer">© 2018 VINFAST VN. All rights reserved</div>
</div>
</body>
<!-- InstanceEnd --></html>
/* CSS Document */
*
{
margin: 0;
padding: 0;
}
body
{
line-height: 22px;
font-size: 20px;
background-color: #D3CCCC;
}
.fl-left
{
float: left;
}
.fl-right
{
float: right;
}
#header
{
background: #000000;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
clear: both;
width: 0px;
height: 0px;
}
#logo
{
padding: 7px 0px;
}
.wp-inner
{
width: 1170px;
margin: 0 auto;
}
#main-menu
{
list-style: none;
}
#main-menu li
{
float: left;
}
#main-menu li a
{
text-decoration: none;
color: #FFFFFF;
text-transform: uppercase;
display: block;
padding: 35px 30px;
}
#main-menu li a:hover
{
background: #8E1719;
color: #FFFFFF;
}
#car
{
display: flex;
background: #FFFFFF;
}
#carimg
{
margin: auto;
}
#video-tintuc
{
width: 1170px;
margin: auto;
}
#vinfast-video-trailer
{
width: 640px;
float:left;
}
#header-video
{
}
.font-chu-video
{
font-size: 50px;
padding: 20px 0px;
text-transform: uppercase;
}
#video
{
display: flex;
}
#main-video
{
margin: auto;
}
#tin-tuc
{
width: 500px;
float:right;
}
#noi-dung
{
display: flex;
}
#hinh
{
margin: auto;
}
#chu
{
display: block;
float:none;
}
.tieudetintuc
{
font-size: 23px;
text-decoration: none;
color: #000000;
}
.tieudetintuc:hover
{
color: #222C63;
}
#footer
{
background-color: #231E1E;
text-align: center;
padding: 30px;
}
#mau-nen
{
max-width: inherit;
max-height: inherit;
background-color: #000000;
color: #FFFFFF;
}
#noidung
{
width: 1170px;
margin: auto;
display: flex;
}
#dau-xe
{
margin: auto;
}
#gioithieu
{
}
mình mới học nên code chưa đẹp lắm mong bạn thông cảm
Tại sao bắt buộc phải là display: flex;?
Định làm trang web ngang à?
2 Likes
à không, tại block không dược nên vọc sang flex lại được á .
Bỏ flex đi là được bạn nhé. Mình tưởng bạn định làm web flex nên nãy mới không bảo bạn bỏ.
1 Like
/* CSS Document */
*
{
margin: 0;
padding: 0;
}
body
{
line-height: 22px;
font-size: 20px;
background-color: #D3CCCC;
}
.fl-left
{
float: left;
}
.fl-right
{
float: right;
}
#header
{
background: #000000;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
clear: both;
width: 0px;
height: 0px;
}
#logo
{
padding: 7px 0px;
}
.wp-inner
{
width: 1170px;
margin: 0 auto;
}
#main-menu
{
list-style: none;
}
#main-menu li
{
float: left;
}
#main-menu li a
{
text-decoration: none;
color: #FFFFFF;
text-transform: uppercase;
display: block;
padding: 35px 30px;
}
#main-menu li a:hover
{
background: #8E1719;
color: #FFFFFF;
}
#car
{
display: flex;
background: #FFFFFF;
}
#carimg
{
margin: auto;
}
#video-tintuc
{
width: 1170px;
margin: auto;
}
#vinfast-video-trailer
{
width: 640px;
float:left;
}
#header-video
{
}
.font-chu-video
{
font-size: 50px;
padding: 20px 0px;
text-transform: uppercase;
}
#video
{
display: flex;
}
#main-video
{
margin: auto;
}
#tin-tuc
{
width: 500px;
float:right;
}
#noi-dung
{
}
#hinh
{
margin: auto;
}
#chu
{
display: block;
float:none;
}
.tieudetintuc
{
font-size: 23px;
text-decoration: none;
color: #000000;
}
.tieudetintuc:hover
{
color: #222C63;
}
#footer
{
background-color: #231E1E;
text-align: center;
padding: 30px;
}
#mau-nen
{
max-width: inherit;
max-height: inherit;
background-color: #000000;
color: #FFFFFF;
}
#noidung
{
width: 1170px;
margin: auto;
}
#dau-xe
{
margin: auto;
}
#gioithieu
{
}
Bạn xem file css đã đúng như thế này chưa?
mình chỉnh đúng rồi đó, mà sao nó vẫn như cũ à, cái hình đầu xe nó ko căn giữa .
hì, bạn cho cái image làm background của cái div 2 chắc được.
bạn chỉnh như này nhá
#noidung
{
display: flex;
flex-direction: column;
justify-content: center;
}
là xe sẽ căn giữa và hàng chữ sẽ xuống hàng
nếu xài flex thì có thể thêm thuộc tính flex-direction: column; thử xem
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?