Question

我是CSS的超级老兄，我已经制作了一些用于在页面上练习定位项目的方框。可悲的是，我已经遇到了问题！我想把盒子1和2放在一条线上，而盒子3和4放在下一行。我试图使用float: left使方框2上升到方框1，但事情只是重叠。

**如果可以，会发布图片。

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="boxprac.css">
    <title>Box Practice</title>
  </head>
  <body>
    <div id="box1">
      <h1>Box One</h1>
    </div>
    <div id="box2">
      <h1>Box Two</h1>
    </div>
    <div id="box3">
      <h1>Box Three</h1>
    </div>
    <div id="box4">
      <h1>Box Four</h1>
    </div>
  </body>
</html>

风格

* {
  padding: 0;
  margin: 0;
}

#box1 {
  border: 1px solid black;
  text-align: center;
  height: 200px;
  width: 400px;
  margin: 1em;
  line-height: 200px;
  clear: left;
}

#box2 {
  border: 1px solid black;
  text-align: center;
  height: 200px;
  width: 400px;
  margin: 1em;
  line-height: 200px;
  float: left;
}

#box3 {
  border: 1px solid black;
  text-align: center;
  height: 200px;
  width: 400px;
  margin: 1em;
  line-height: 200px;
}

#box4 {
  border: 1px solid black;
  text-align: center;
  height: 200px;
  width: 400px;
  margin: 1em;
  line-height: 200px;
}

我可以设法在第二行上使用float left属性排列第2,3和4行;但是，如果它不在所有三个盒子上，那么它们就会堆叠在一起。

Answer 1

将float: left放在所有四个框上，并将clear: left添加到第三个框：

＆＃13;

* {
  padding: 0;
  margin: 0;
}

#box1 {
  border: 1px solid black;
  text-align: center;
  height: 200px;
  width: 200px;
  margin: 1em;
  line-height: 200px;
  float: left;
}

#box2 {
  border: 1px solid black;
  text-align: center;
  height: 200px;
  width: 200px;
  margin: 1em;
  line-height: 200px;
  float: left;
}

#box3 {
  border: 1px solid black;
  text-align: center;
  height: 200px;
  width: 200px;
  margin: 1em;
  line-height: 200px;
  clear: left;
  float: left;
}

#box4 {
  border: 1px solid black;
  text-align: center;
  height: 200px;
  width: 200px;
  margin: 1em;
  line-height: 200px;
  float: left;
}

＆＃13;

    <div id="box1">
      <h1>Box One</h1>
    </div>
    <div id="box2">
      <h1>Box Two</h1>
    </div>
    <div id="box3">
      <h1>Box Three</h1>
    </div>
    <div id="box4">
      <h1>Box Four</h1>
    </div>

＆＃13;

Answer 2

这基本上是解决这个问题的理念。最好的方法是在wrap

中div每组方框

* {
  padding: 0;
  margin: 0;
}
.boxes {
  width: auto;
  height: 100px;
  }
#box1 {
  border: 1px solid black;
  text-align: center;
  height: 50px;
  width: 50px;
  margin: 1em;
  font-size: 12px;
  line-height: 50px;
  float: left;
}

#box2 {
  border: 1px solid black;
  text-align: center;
  height: 50px;
  width: 50px;
  font-size: 12px;
  margin: 1em;
  line-height: 50px;
  float: left;
}

#box3 {
  border: 1px solid black;
  text-align: center;
  height: 50px;
  width: 50px;
  font-size: 12px;
  margin: 1em;
  line-height: 50px;
  float: left;
}

#box4 {
  border: 1px solid black;
  text-align: center;
  height: 50px;
  font-size: 12px;
  width: 50px;
  margin: 1em;
  line-height: 50px;
  float:left;
}

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="boxprac.css">
    <title>Box Practice</title>
  </head>
  <body>
  <div class="boxes">
    <div id="box1">
      <p>Box One</p>
    </div>
    <div id="box2">
      <p>Box Two</p>
    </div>
    </div>
    <div class="boxes">
    <div id="box3">
      <p>Box Three</p>
    </div>
    <div id="box4">
      <p>Box Four</p>
    </div>
    </div>
  </body>
</html>

当我尝试漂浮物品时，我的div正在堆叠在彼此之上

2 个答案: