如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案？答案

【问题标题】：How do I convert this HTML-table layout solution to floating-div solution?如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案？
【发布时间】：2011-01-22 00:12:25
【问题描述】：

我经常需要在左侧列出各种大小的图像，右侧为文本，如下所示：

alt text http://www.deviantsart.com/upload/7s01l5.png

17 年来，我用 HTML 表格 解决了这个问题，如下所示：

<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 时，由于某种原因它失败，这是我的当前尝试：

alt text http://www.deviantsart.com/upload/tuvquv.png

我必须对这段代码进行哪些更改，以使这个 div 解决方案看起来像 table 解决方案？

<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>

【问题讨论】：

回头看看你希望图像容器的高度向下推（ala 100% 高度与溢出：隐藏在它的父级上）......没有纯 CSS 方式来做到这一点（没有黑客攻击）。由于我不喜欢黑客可能不仅仅是非语义标记，因此我删除了我的答案：P
我不知道蒂莫西，我的例子似乎有效，尽管我承认我只在 IE7 和 Firefox 中查看过@它。我的解决方案的唯一缺点是必须根据每个图像设置填充/边距。
那么，如果 div 已经使用了 17 年的表格，为什么还要切换到 div 呢？仅仅因为每个人都嘲笑使用表格进行布局并不意味着它是错误的，我认为使用 div 只是“要做的事情”，但这并不意味着它总是最好的解决方案。

标签： html css html-table css-float

【解决方案1】：

这不是非常灵活 - 您必须根据图像为每个 DIV 设置填充，但它的标记非常干净：

<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

请注意，如果您的屏幕非常窄，则文本不会环绕图像，如您的示例所示。

【讨论】：

如果可能的大小已知，您可以通过为 div 提供不同的类并使用级联来覆盖 div.one 和 div.one img 样式。 div.one.big { padding-left:300px; } div.one.big img { margin-left:-300px } 等等。

【解决方案2】：

您可以通过在 itemBody 中为 <p> 添加宽度（以及一些填充以使其美观）来使其工作：

.itemBody p { 
  width:400px;
  padding-left:20px;
}

.itemBody h1 { 
  padding-left:20px;
}

此解决方案的问题是段落的右边缘将根据图像大小以不同的方式对齐，并且如果图像非常宽，文本仍可能落到下一行。如果您可以根据图像大小使用服务器端代码动态调整大小，那么就可以了。（或者我想你可以在 javascript 中调整大小。）

我真的认为这是一个最好还是用表格解决的问题。无论图像和文本的大小如何，您都可以获得动态宽度调整，并且一切都保持在同一条线上。无需破解，无需大惊小怪，适用于所有浏览器。

【讨论】：