感谢Erik's help关于我的最后一个问题，我能够让我的图标左移、文本右移的 float div 示例正常工作:
http://tanguay.info/web/examples/tablelessItemLayout
(来源:tanguay.info)
但是，由于图像的宽度各不相同，我不得不通过在一些标签中放置内联样式来作弊。
我如何更改此代码以便:
- 没有内联样式
- 它支持各种尺寸的图像宽度
代码:
<html>
<style>
* { margin: 0; padding: 0 }
body {
padding: 20px;
text-align: center;
background-color: #333;
}
p {
margin: 0 0 10px 0;
}
#content {
width: 600px;
margin-left: auto;
margin-right: auto;
background: brown;
border: 1px solid #555;
text-align: left;
}
.item {
margin: 20px;
background-image:url('paperBackground.jpg');
padding: 20px;
}
.itemIcon {
float:left;
}
.itemIcon p {
font-size: 8pt;
margin: 5px 0 0 0;
}
.itemBody h1 {
font-size: 18pt;
color: brown;
margin: 0 0 10px 0;
}
.clear {
clear: both;
}
</style>
<body>
<div id="content">
<div class="item">
<div class="itemIcon" style="width: 70px; padding-left: -80px">
<img src="icon.png" alt=""/>
<p>This is the caption that is under the image.</p>
</div>
<div class="itemBody" style="margin-left: 80px">
<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>
<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>
</div>
<div class="item">
<div class="itemIcon" style="width: 160px; padding-left: -170px">
<img src="bigIcon.png" alt=""/>
<p>This is the caption that is under the image and it is a very long text so it is going to wrap a couple times here in the left column under the image.</p>
</div>
<div class="itemBody" style="margin-left: 170px">
<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>
<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>
</div>
</div>
</body>
</html>
最佳答案
如果添加 overflow: auto，您可以删除那些自定义内联边距和填充到 .itemBody相反:
.itemIcon {
float: left;
margin-right: 10px;
}
.itemBody {
overflow: auto;
}
但是，您将无法摆脱 .itemIcon 上的行内宽度像这样，因为 CSS 无法限制 <p> 的宽度到它前面的图像的宽度。但是，如果您只有一张图片而没有与之搭配的文本，则不需要宽度。
不过，如果您使用 CSS 表格，您可以完全摆脱内联样式:
.itemIcon {
display: table-cell;
padding-right: 10px;
}
.itemBody {
display: table-cell;
vertical-align: top;
width: 100%;
}
width: 100%在 itemBody 上强制 itemIcon 的宽度缩小到其最小宽度，这由图像的宽度决定。 vertical-align: top将停止 itemBody 的第一行从与 itemIcon 中的图像/文本对齐“表列”。
关于css - CSS 有没有办法确定和调整图像宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2351598/