Question

我有以下示例

<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将进入浮动表。该表需要浮动，因此不能更改。有没有办法阻止其他内容进入浮动元素？

Answer 1

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

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

请参阅新的JSFiddle。

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

Answer 2

尽量不要使用对齐和边框等折旧的HTML标记。 Cellpadding和cellspacing也可以通过样式来实现，但我会将其作为练习:)这将使div占用所需的空间。如果您知道包含表和此div的父div的大小，只需将表的宽度和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/

Answer 3

使用此

<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>

Answer 4

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

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

Answer 5

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

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

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

Answer 6

@ Mr.Lister ....

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

浮动：左;对您的代码有所帮助。

祝你好运！

Div输入浮动表格内容

6 个答案: