使用CSS将元素推送到新行

Question

这是我的HTML

<div id="box"></div>
<p>this is text</p>
<table>
<tr>
    <td>1</td>
    <td>2</td>
</tr>
<tr>
    <td>3</td>
    <td>4</td>
</tr>
<tr>
    <td>5</td>
    <td>6</td>
</tr>
<tr>
    <td>7</td>
    <td>8</td>
</tr>
<tr>
    <td>9</td>
    <td>10</td>
</tr>

这是我的CSS

#box {
    width:200px;
    height:200px;
    border:1px solid red;
    float:left;
     }
table {
  display:block;
  position :relative;
  white-space: pre-line;
      }

我希望将表格保留在div框下方，同时保持文本与框内嵌在一起。我只想通过更改表或div的CSS属性而不是p来实现这一点。

这怎么可能？

Answer 1

table { clear: left; }可以将其添加到您现有的CSS中。

Answer 2

向您的表格CSS

添加clear: both或clear:left

table {
  clear: both; /*clear: left;*/
  display:block;
  position :relative;
  white-space: pre-line;
      }

Answer 3

<强> HTML

---

<div id="box"></div>
<p>this is text</p>
<table>
<tr>
    <td>1</td>
    <td>2</td>
</tr>
<tr>
    <td>3</td>
    <td>4</td>
</tr>
<tr>
    <td>5</td>
    <td>6</td>
</tr>
<tr>
    <td>7</td>
    <td>8</td>
</tr>
<tr>
    <td>9</td>
    <td>10</td>
</tr>

<强> CSS

---

#box
{
    width:100px;
    height:100px;
    border:1px solid black;
    float:left;
}
table
{
    clear:both;
}

<强>小提琴

---

的 Fiddle

<强>输出：

---

Answer 4

只需使用clear: both查看http://jsfiddle.net/qmxp9/

即可