让我们看看这个布局:
<div style="float: left">
content1
</div>
<div style="float: left">
<table width="100%"><tr><td>dfsd</td></tr></table>
</div>
然后发生以下情况:表格转到新行,并且将与屏幕一样宽。但它应该保留在前一个div的旁边,并且与第二个div一样宽。 如何解决这个问题?
编辑: 左列固定宽度为200px。 第二列应为100%
答案 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%;
(条形默认边距/填充),您需要手动更改它。
当没有空间容纳其他元素时,左浮动将无效。