表格内部div - 扩展到屏幕宽度,而不是div

时间:2013-03-30 15:53:43

标签: html css

让我们看看这个布局:

<div style="float: left">
content1
</div>
<div style="float: left">
<table width="100%"><tr><td>dfsd</td></tr></table>
</div>

然后发生以下情况:表格转到新行,并且将与屏幕一样宽。但它应该保留在前一个div的旁边,并且与第二个div一样宽。 如何解决这个问题?

编辑: 左列固定宽度为200px。 第二列应为100%

3 个答案:

答案 0 :(得分:2)

我认为你的意思是第二列应该是页面其余部分的100%,对吗?

但是,这取决于你想要实现的目标。如果对您的内容有意义,您可以创建一个周围的表:

<table class="table_surround">
   <tr>
       <td class="col1">content 1</td>
       <td>(table here)</td>
   </tr>
</table>

.table_surround { width:100%; }
.col1 { width:200px; }

或者你可以使用绝对定位:

<div style="position:absolute; left:0; width:200px;" >content 1</div>
<div style="position:absolute; left:200px; right:0;" >table here</div>

这是另一个不错的选择: Expand a div to take the remaining width

答案 1 :(得分:0)

给你的DIV宽度......类似于:

<div style="float: left; width: 25%;">
    content1
</div>
<div style="float: left; width: 75%;">
    <table width="100%"><tr><td>dfsd</td></tr></table>
</div>

答案 2 :(得分:0)

默认情况下,CSS中的<div>将设置为width: 100%;(条形默认边距/填充),您需要手动更改它。

当没有空间容纳其他元素时,左浮动将无效。