Question

可能重复：
Two divs, one fixed width, the other, the rest

我希望2 div并排，右边有一个随机宽度（这包含另外2 div s - 带有随机文本的标题和带有随机图像的正文由JS生成）左边应该使用剩余的宽度（这也包含另外2个div s - 标题和正文，两者都只包含静态文本。）

我目前有一个3 table的解决方案，这很简单，但我正在重新编码我的所有表格而没有严格的表格内容到CSS（是的，我是相当的这个晚了几年）我宁愿在CSS中也有这个，如果它可能的话呢？在寻找解决方案很长一段时间后，似乎可能不是......

值得注意的是，图像高度始终相同，每个图像的宽度也在JS中指定。

我目前的解决方案（使用JS和更多内容尽可能简单明了，图像只是一个示例，宽度可达250px）：My fiddle

HTML：

<table class="container" cellpadding="0">
 <tr>
  <td>
   <table class="left">
    <thead>
     <tr>
      <th>Text Header</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>This just contains text.
      </td>
     </tr>
    </tbody>
   </table>
  </td>
  <td>
   <table class="right">
        <thead><tr>
        <th>Image Header</th>
        </tr></thead>
        <tbody>
        <tr>
        <td>
         <img src="http://www.derdiz.com/wp-content/uploads/2011/06/vertigo.jpg" width="200" height="200" border="0" style="display:block;">
        </td>
        </tr>
        </tbody>
        </table>
  </td>
 </tr>
</table>

CSS：

table {
border-collapse: collapse;
}
table.container {
width: 500px;
background-color: #DDD;
border: 1px solid #0F0;
}
.container td {
vertical-align: top;
}
table.left {
border: 0px;
}
table.right {
border-left: 1px solid #F00;
}
.left th, .left td, .right th, .right td {
padding: 3px;
}
.left thead th, .right thead th {
background-color: #00F;
color: #FFF;
font-weight: bold;
text-align: left;
}
.right tbody td {
background-color: #888;
}

请告诉您是否还需要JS和我未完成的CSS解决方案。

Answer 1

而不是js，如果你使用两个浮动div，一个包含文本和文本标题，一个包含图像和图像标题，我认为它应该做你想要的：

http://jsfiddle.net/PeyWR/10/

（我失去了你的一些造型，但我认为这个想法就在那里）。

将2个div并排对齐 - 右侧随机宽度，左侧使用剩余宽度

1 个答案: