10/10/2018, 10:41
[help] css div float dàn sản phẩm
mình viết đoạn code sau
nhưng canh giữa 3 sản phẩm trong cái div có id là "lon" hoài không dc , bác nào bít cái này giúp với
<html>
<body>
<style>
div#lon
{
width:600px;
height:50px;
background:blue;
}
div#nho
{
background:#ececec;
color:red;
font-weight:bold;
width:170px;
float:left
}
</style>
<div id="lon">
<center>
<div id="nho"> san pham 1</div>
<div id="nho"> san pham 2</div>
<div id="nho"> san pham 3</div>
<div style="clear:left">
</center>
</div>
</body>
</html>
<body>
<style>
div#lon
{
width:600px;
height:50px;
background:blue;
}
div#nho
{
background:#ececec;
color:red;
font-weight:bold;
width:170px;
float:left
}
</style>
<div id="lon">
<center>
<div id="nho"> san pham 1</div>
<div id="nho"> san pham 2</div>
<div id="nho"> san pham 3</div>
<div style="clear:left">
</center>
</div>
</body>
</html>
Bài liên quan
Bạn nhầm khái niệm id và class trong html và css.
Trong html mỗi đối tượng chỉ có 1 id và là duy nhất. Còn class gồm nhiều đối tượng chung 1 số thuộc tính nào đó.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Học CSS thật dễ</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#lon { width:600px; height:50px; background:blue; } div.nho { background:#ececec; color:red; font-weight:bold; width:170px; height:50px; float:left; text-align: center; } </style> </head> <body> <div id="lon"> <div class="nho"> san pham 1</div> <div class="nho"> san pham 2</div> <div class="nho"> san pham 3</div> </div> </body> </html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>H?c CSS th?t d?</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#lon { width:600px; height:50px; background:blue; } div.nho { background:#ececec; color:red; font-weight:bold; width:170px; height:50px; float:left; margin-right: 45px; } div.nho.last{ margin: 0; } </style> </head> <body> <div id="lon"> <div class="nho"> san pham 1</div> <div class="nho"> san pham 2</div> <div class="nho last"> san pham 3</div> </div> </body> </html>@imchicken : ông là lâm trong list yahoo của tui phải hong
Giải thích phần không chạy coi.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>H?c CSS th?t d?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table border="1" width="600px" height="50px" bgcolor="blue">
<tr>
<td>
<center>
<table>
<tr>
<td width="170px" bgcolor="#ececec">san pham 1</td>
<td width="170px" bgcolor="#ececec">san pham 2</td>
<td width="170px" bgcolor="#ececec">san pham 3</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Thứ 2 : ko nên dùng tag center
Thứ 3 : Bạn đã cho width của div trong và div ngoài nên mình đưa ra 2 cách giải quyết :
Cách 1 : cho padding trái phải của div ngoài; hay cho padding-left thôi cũng được rồi
Cách 2 : Viết javascript : Thêm vào thuộc tính margin-left cho các phần tử div trong có thứ tự ((n%3)==1)
Còn cách khác nữa thì chưa bít
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Học CSS thật dễ</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> div#lon { width:600px; height:50px; background:none repeat scroll 0 0 blue; } div.nho { background:none repeat scroll 0 0 #ECECEC; color:red; font-weight:bold; width:170px; height:40px; text-align: center; border-right: 1px solid blue; display: table-cell; vertical-align: middle; } </style> </head> <body> <div id="lon"> <div style="height: 5px; width: 100%; clear: both;"></div> <div style="display: table-cell; width: 40px;"></div> <div class="nho"> san pham 1</div> <div class="nho"> san pham 2</div> <div class="nho"> san pham 3</div> </body> </html><div style="display: table-cell; width: 40px;"></div> <- bó tay, ko nên viết inline style đặc biệt là ko được thêm div thừa vào.