Question

我右边有一个浮动元素（大小可能会有所不同）。我想使用所有可用的剩余空间显示它左边的表格。此外，表格列需要成比例，所以我需要表格布局：固定。

（由于到目前为止所有解决方案都是解决方法，我想更明确地指出：浮动元素没有固定大小。因此所有具有margin-right，width：x％或witdh：x px的解决方案都将要么不使用屏幕区域，要么剪切/覆盖元素。）

有可能吗？

select {
    float:right;
}
#wrapper {
    background-color:gray;
    padding:5px;
    float:left;
}
#wrapper table {
    table-layout:fixed;
    width: 100%;
    background-color:#00FFFF;
}
td {
    padding:5px;
    border: 1px solid white;
    border-collapse:collapse;
}

<select size="3">
<option>DB entries with unknown width</option>
<option>h--p://www.google.com</option>
<option>h--p://www.msn.com</option>
</select>    
<div id="wrapper">
<table>
        <tr>
            <td>left</td>
            <td>some text</td>
        </tr>
        <tr>
            <td>left</td>
            <td></td>
        </tr>
        <tr>
            <td>left</td>
            <td>NG</td>
        </tr>
    </table>
</div>

Answer 1

您可以为图像和div指定宽度。

像这样更新你的CSS -

img {
    float:right;
    width: 40%;
}
#wrapper {
    background-color:gray;
    padding:5px;
    float:left;
    width: 50%;
}

这应该有效！

Answer 2

指定#wrapper的宽度

#wrapper {
  background-color:gray;
  padding:5px;
  float:left;
  width: 50%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 3

你应该这样做：

http://jsfiddle.net/ZppLh/

HTML

<img src="whatever">
<div id="wrapper">
 <table>
  <tbody>
   <tr>
    <td>left</td>
    <td>some text</td>
   </tr>
   <tr>
    <td>left</td>
    <td></td>
   </tr>
   <tr>
    <td>left</td>
    <td>NG</td>
   </tr>
  </tbody>
 </table>
</div>

CSS

img {
    float:right;
}
#wrapper {
    background-color:gray;
    right: 285px;
    position: absolute;
}
#wrapper table {
    table-layout:fixed;
    width: 100%;
    background-color:#00FFFF;
}
td {
    padding:5px;
    border: 1px solid white;
    border-collapse:collapse;
}

Answer 4

Here's another approach仅使用CSS。 HTML与原始HTML相同，所以我不会再在这里引用它。 CSS只有一些变化。这里的关键是不浮动表的容器，并将overflow: hidden应用于其包装器。

select {
    float:right;
}
#wrapper {
    background-color:gray;
    padding:5px;
    width: auto;
    overflow: hidden;
}
#wrapper table {
    table-layout:fixed;
    width: 100%;
    background-color:#00FFFF;
}
td {
    padding:5px;
    border: 1px solid white;
    border-collapse:collapse;
}

您可能希望将整个事件（select和table）封装在div包装器中，以便您控制在页面上下文中如何使用它

浮动元素旁边的表

4 个答案: