Question

请检查此codepen： https://codepen.io/Bhoopalan/pen/KybKRy

<div row id="container">
<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
</div>
<div>
<button>Click Me</button>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="effects.js"></script>

我创建了3个盒子和一个＆＃34;点击我＆＃34;按钮。所有这四个对象都在不同的div上。我希望3个盒子在同一条线上，点击我按钮在盒子下面。所以在css中我写了如下

    .box {
    background: purple;
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px;
    color: white;
    text-align: center;
}

#container {
    max-width: 40%;
    margin: 0 auto;
}

使用float for .box，我预计这些盒子只能向左浮动。令我惊讶的是，位于单独div中的按钮也向左浮动到框中。我做错了什么？

Answer 1

而不是float: left;，您应该使用css display property。

display: inline-block;

另外，row不是有效的html属性。 :)

.box {
  background: purple;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 10px;
  color: white;
  text-align: center;
}

#container {
  max-width: 40%;
  margin: 0 auto;
}

<div id="container">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>
<div>
  <button>Click Me</button>
</div>

Div不会将对象发送到另一个对象下面

1 个答案: