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

发布于 2024-08-23 01:59:17 字数 6114 浏览 0 评论 0原文

我经常需要列出左侧带有各种尺寸的图像和右侧文本的项目，如下所示：

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>

原文

I often need to list items with various-sized images on the left and text on the right, like this:

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

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>

Everytime I have tried to switch to floating divs, it has failed for one reason or another, here is my current attempt:

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

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

那些过往 2024-08-30 01:59:17

这不是很灵活 - 您必须根据图像设置每个 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

请注意，如果您将屏幕设置得很窄，则文本不会环绕图像，如您的示例所示。

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>

See it in action at: 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.

回复收藏 0 原文

隱形的亼 2024-08-30 01:59:17

您可以通过向 itemBody 内的

添加宽度（以及一些填充以使其美观）来使其工作：

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

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

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

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

You could make it sort-of work by adding a width to the <p> within itemBody (and some padding to make it nice):

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

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

The problem with this solution is that the right edges of the paragraphs will be aligned differently depending on the image size, and the text could still fall to the next line if the image is pretty wide. If you can dynamically size things with server-side code based on the image size, then this would be ok. (Or I suppose you could do the resizing in javascript.)

I really think this is a problem still best solved with tables. You get the dynamic width adjustment and everything stays on the same line, no matter what size your images and text are. No hacks, no fuss, works in all browsers.

回复收藏 0 原文

~没有更多了~