div内的表100扩展到屏幕宽度，而不是div

Question

让我们看看这个布局:

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

则会发生以下情况:表移到新行，并且将与屏幕一样宽。但它应该保持在前一个div的旁边，并与第二个div一样宽。如何解决这个问题?

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

Answer 1

我想你的意思是第二列应该是页面剩余部分的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>

这是另一个不错的选择:展开div以获取剩余宽度

Answer 2

给你的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>

Answer 3

默认情况下，<div> s将被设置为width: 100%;(栏默认边距/填充)在CSS中，你需要手动更改它。

当没有足够的空间容纳其他元素时，左浮动将不起任何作用。