0

可能重复：
两个 div，一个固定宽度，另一个，其余的

我想要 2 divs 并排，其中右侧具有随机宽度（这包含另外 2 divs - 带有随机文本的标题和带有随机图像的主体，全部由 JS 生成），而左侧应该使用剩余宽度（这还包含另一个 2 divs - 一个标题和一个正文，都只包含静态文本）。

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

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

我当前的解决方案（将 JS 和更多内容剥离为尽可能简单和清晰，图像只是一个示例，宽度可能高达 250 像素）：我的小提琴

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 解决方案。

4

1 回答 1

1

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

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

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

于 2012-08-03T06:39:40.503 回答