1

我有以下示例

<table align="right" border="1" cellpadding="1" cellspacing="1">
  <tbody>
    <tr>
        <td>
            test
        </td>
        <td>
             test
        </td>
    </tr>
    <tr>
        <td>
             test
        </td>
        <td>
             test
        </td>
    </tr>
  </tbody>
</table>

<div style="width: 100%; background-color: red">
   test
</div>

如果代码运行，div会进入浮动表格。该表将需要浮动，因此无法更改。有没有办法阻止其他内容进入浮动元素？

4

6 回答 6

1

一种解决方案是为表格提供明确的背景颜色。

<table style="background:white; float:right" ...

请参阅新的JSFiddle。

其他答案都会更改其他属性，例如 div 和表格的相对宽度或位置。

于 2013-01-11T12:26:07.860 回答
0

尽量不要使用过时的 HTML 标签，如对齐和边框。Cellpadding 和 cellspacing 也可以通过样式来实现，但我将把它留作练习:) 这将使 div 占用所需的空间。如果你知道table和这个div所在的父div的大小，只需将table和div的宽度设置为固定值即可。

<table style="float:right; border: 1px solid black;" cellpadding="1" cellspacing="1">
  <tbody>
    <tr>
        <td>
            test
        </td>
        <td>
             test
        </td>
    </tr>
    <tr>
        <td>
             test
        </td>
        <td>
             test
        </td>
    </tr>
  </tbody>
</table>

<div style="float:left; background-color: red">
   test
</div>

http://jsfiddle.net/Shnjt/

于 2013-01-11T12:22:18.757 回答
0

用这个

<div style="90%; margin-left:auto; margin-right:auto;">
<table style="float:right;width:45%">
</table>
<div style="width:45%;background-color: red; float:left;">
   test
</div>
</div>
于 2013-01-11T12:22:43.063 回答
0

如果你想让 div 和 table 浮动，你需要为 div 和 table 设置宽度和 css float: left: float: right。

否则，您可以尝试width:100%从您的删除div并添加display: inline-block.

于 2013-01-11T12:22:47.820 回答
0

有一个 css 属性控制元素是否尊重前一个浮动元素。

这是文档：http ://www.w3.org/wiki/CSS/Properties/clear

我不知道你想得到什么，但这可能会有所帮助。

于 2013-01-11T12:23:18.073 回答
0

@李斯特先生....

    <div style="width: 100%; background-color: red;float:left;">
       test
    </div>

向左飘浮; 将对您的代码有所帮助。

祝你好运！

于 2013-01-11T13:07:00.473 回答