Question

我经常需要在左侧列出各种尺寸图片的项目，在右侧列出文字，如下所示：

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

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

我有什么需要更改到此代码，以便此 div 解决方案看起来像表解决方案？

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

Answer 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

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

Answer 2

您可以通过在itemBody中为<p>添加宽度（以及一些填充以使其变得漂亮）来实现排序：

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

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

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

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

如何将此HTML表格布局解决方案转换为floating-div解决方案？

2 个答案: