5
Tôi thường cần phải liệt kê các mặt hàng với nhiều kích thước hình ảnh ở bên trái và văn bản ở bên phải, như thế này:Làm cách nào để chuyển đổi giải pháp bố cục bảng HTML thành giải pháp floating-div?
alt text http://www.deviantsart.com/upload/7s01l5.png
Đối với 17 năm, tôi đã giải quyết điều này với bảng HTML, như thế này:
<html>
<style>
* { margin: 0; padding: 0 }
body {
padding: 20px;
}
#content {
width: 600px;
padding: 20px;
margin-left: auto;
margin-right: auto;
background: green;
}
.item {
margin: 0 0 20px 0;
}
.itemIcon {
float:left;
}
.itemBody {
float:right;
}
.clear {
clear: both;
}
</style>
<body>
<div id="content">
<div class="item">
<div class="itemIcon">
<img src="icon.png" alt=""/>
</div>
<div class="itemBody">
<h1>This is the first item</h1>
<p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p>
</div>
<br class="clear"/>
</div>
<div class="item">
<div class="itemIcon">
<img src="bigIcon.png" alt=""/>
</div>
<div class="itemBody">
<h1>This is the second item</h1>
<p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p>
</div>
<br class="clear"/>
</div>
<div class="item">
<div class="itemIcon">
<img src="icon.png" alt=""/>
</div>
<div class="itemBody">
<h1>This is the first item</h1>
<p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p>
</div>
<br class="clear"/>
</div>
</div>
</body>
</html>
Mỗi lần tôi đã cố gắng chuyển sang divs nổi, nó có thất bại vì một lý do này hay cách khác, đây là tôi hiện nỗ lực:
alt text http://www.deviantsart.com/upload/tuvquv.png
Tôi phải làm gì để thay đổi để mã này để div này giải pháp trông giống như bảng dung dịch?
<html>
<style>
* { margin: 0; padding: 0 }
body {
padding: 20px;
}
#content {
width: 600px;
padding: 20px;
margin-left: auto;
margin-right: auto;
background: green;
}
.item {
margin: 0 0 20px 0;
}
.itemIcon {
float:left;
}
.itemBody {
float:right;
}
.clear {
clear: both;
}
</style>
<body>
<div id="content">
<div class="item">
<div class="itemIcon">
<img src="icon.png" alt=""/>
</div>
<div class="itemBody">
<h1>This is the first item</h1>
<p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p>
</div>
<br class="clear"/>
</div>
<div class="item">
<div class="itemIcon">
<img src="bigIcon.png" alt=""/>
</div>
<div class="itemBody">
<h1>This is the second item</h1>
<p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p>
</div>
<br class="clear"/>
</div>
<div class="item">
<div class="itemIcon">
<img src="icon.png" alt=""/>
</div>
<div class="itemBody">
<h1>This is the first item</h1>
<p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p>
</div>
<br class="clear"/>
</div>
</div>
</body>
</html>
Nhìn lại để thấy rằng bạn muốn chiều cao của vùng chứa hình ảnh bị đẩy xuống (cao 100% với tràn: ẩn trên đó là cha mẹ) ... không có cách CSS thuần túy để làm điều này (không có hack). Vì tôi không thích hack có lẽ không phải là đánh dấu không phải ngữ nghĩa, tôi xóa câu trả lời của mình: P –
Tôi không biết Timothy, ví dụ của tôi dường như hoạt động, mặc dù phải thừa nhận rằng tôi chỉ xem nó trong IE7 và Firefox. Hạn chế duy nhất đối với giải pháp của tôi là phải đặt padding/margin tùy thuộc vào từng hình ảnh. – Erik
Vậy tại sao chuyển sang div nếu nó hoạt động với các bảng trong 17 năm? Chỉ vì mọi người chế giễu việc sử dụng các bảng để bố trí không có nghĩa là nó sai, tôi nghĩ việc sử dụng div chỉ là "điều" để làm, nhưng nó không có nghĩa nó luôn là giải pháp tốt nhất. – Mottie