html - 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 中设置为 (bar default margins/padding)，您需要手动更改它。

当没有空间容纳其他元素时，向左浮动将无济于事。