如何将此HTML表格布局解决方案转换为浮动div解决方案？ [英] How do I convert this HTML-table layout solution to floating-div solution?
本文介绍了如何将此HTML表格布局解决方案转换为浮动div解决方案？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我经常需要列出左侧各种大小图片的项目，以及右侧的文字项目：
I often need to list items with various-sized images on the left and text on the right, like this:
对于17年，我已经用 HTML表格解决了这个问题，例如：
For 17 years, I have solved this with HTML tables, like this:
<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>
每次我试图切换到浮动div ：
Everytime I have tried to switch to floating divs, it has failed for one reason or another, here is my current attempt:
我必须对此代码进行更改 div 解决方案看起来像表解决方案？
What do I have to change to this code so that this div solution looks like the table solution?
<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>
推荐答案
这不是很灵活 - 每个DIV的填充取决于图像，但其非常干净的标记明智：
This isn't terribly flexible - you have to set the padding for each DIV depending on the image, but its very clean markup wise:
<style>
div.one {
padding-left: 210px;
overflow: auto;
}
div.one img {
float: left;
margin-left: -210px;
}
</style>
<div class="one">
<img src="http://www.pixeloution.com/breakdown.png" width="200" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit orci sed turpis aliquet ac mattis sem t...
</div>
请参阅： http://jsbin.com/iniqu3/2
请注意，如果您使屏幕非常窄，文字不会环绕图像，根据您的示例。
Notice if you make your screen very narrow, the text does not wrap around the image, as per your example.
这篇关于如何将此HTML表格布局解决方案转换为浮动div解决方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
