对齐2周的div并排 - 右随机宽度，使用剩余宽度左

可能重复：
Two divs, one fixed width, the other, the rest 对齐2周的div并排 - 右随机宽度，使用剩余宽度左

我想2 div S按并排，在右边有一个随机宽度（这包含另一个2 div s - 一个带有随机文本的头部和一个带有随机图像的主体，全部由JS生成），而左边应该使用剩余宽度（这也包含另一个头部，一个身体，两个co只能使用静态文本）。

我现在有一个3 table的解决方案，这很简单，但由于我将所有表格都没有严格的表格内容重新编码到CSS（是的，我已经晚了几年）如果完全可能的话，我宁愿在CSS中也有这个功能？值得注意的是，图像高度总是相同的，每个图像的宽度也是在JS中指定的。

我的当前的解决方案（与JS和更汽提出是为简单和清楚成为可能，所述图像仅是示例，并且可以具有高达250像素的宽度）：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的唯一解决方案。

来源

2012-08-03 Mr Love

谢谢，问题是我无法在CSS中指定宽度，因为它是随机的 - 很可能是内联的，我会尝试 – 2012-08-03 07:26:59

非常感谢，确实有效！你甚至不需要在CSS中指定宽度，只需要左边的'div'和'float：right;'右边的'overflow：hidden;'，然后将右边的HTML。（最后一件事似乎有点怪异，有点诡异，但它确实有诀窍！） – 2012-08-03 08:05:24

不是JS，如果使用两个浮动的div，一个包含文本和文本标题，一个包含图像和图像标题，我想应该做你想要什么：

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

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

来源

2012-08-03 06:39:40

我也会看看这个（我只使用JS的随机图像/代码）。 – 2012-08-03 08:06:16

这确实也有效，我认为使用HTML标题而不是'div's是个好主意，但是'h2's需要更多的样式，而且看起来我仍然需要2个“body”div。为文本和图像获得填充权（我可以通过在“p”上加上填充来代替文本）。一旦应用了填充，我还需要'overflow：hidden;'左边的'div'。我看到你也正在颠倒HTML中'div'的顺序，当你想将某些东西向右移动时，是否需要进行一些标准练习？ – 2012-08-03 10:06:41

基本上，当浮动元素，浮动元素需要先来 - 然后未浮动的内容将环绕它。在这种情况下，将文本左侧浮动不起作用，因为文本没有应用宽度，因此会展开到容器的整个宽度，并将图像推到下面。就h2而言，这是针对搜索引擎完成的。您所使用的容器类型越符合他们所拥有的内容类型，搜索引擎就越容易解释您的内容的相对重要性。但是，无论在哪种情况下，你的页面都可以正常显示 – 2012-08-03 19:32:59

对齐2周的div并排 - 右随机宽度，使用剩余宽度左

回答

相关问题