Question

我试过的代码是 CSS代码

#tools
{
    float:left;
}
#sketch 
{
    border: 10px solid grey;
    float:left;
    width: 700px;
    height: 500px;
    position: relative;
}

HTML code：

<div id="tools">
    <p>These are my tools</p>
</div>
<div id="sketch">
    <p>This is my sketch</p>
</div>
<button type="button">Click</button>

我将这两个div放在一起按钮正在显示div的显示侧但我想要div下面的按钮

Fiddle here

Answer 1

清除浮动：

button { clear: both; }

Answer 2

使用clearfix添加包装器：

<div class="wrapper cf">
<div id="tools">
<p>These are my tools</p>
</div>
<div id="sketch">
<p>This is my sketch</p>
</div>
</div>
<button type="button" >Click</button>

http://jsfiddle.net/brutusmaximus/5KmK6/3/

Answer 3

尝试使用“clear：left;”按钮取消前一个div元素的“float：left”。

有关详细信息，请参阅http://www.w3schools.com/cssref/pr_class_clear.asp。

Answer 4

您可以使用以下任何一种：

1）按钮{ 明确：两者; }

2）在Div中添加一个类clearfix - “sketch”，在清除添加的浮点数之后向DOM添加一个伪元素。

  <div id="sketch" class="clearfix">
          <p>This is my sketch</p>
   </div>
  .clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
   }

将其他元素放置在并排放置的两个div元素下方

4 个答案: