所有文本都显示在 div 之间的顶部

Question

我想在box-left divs上方的Akita INU和Cockapoo标签中，而是大多数标签都堆叠在Divs之间的中间。我试图将两个Divs放在一个Div中，但它不起作用。

.box-left {
  clear: all;
  float: left;
  border: 1px solid black;
  width: 600px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.box-right {
  float: right;
  border: 1px solid black;
  width: 600px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

  <div class="label">Akita Inu</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

  
  <div class="label">Cockapoo</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

  <div class="label">Corgi</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

  <div class="label">Shiba Inu</div>
  <div class="box-left"></div>
  <div class="box-right"></div>

Answer 1

.box-container{
  display:flex;
  justify-content: space-between;
  min-width: 600px;
  min-height: 200px;
}
.box {
  width: 300px;
  height: 200px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: 2px solid black;

}

 <div class="label">Akita Inu</div>
 <div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
</div>
  
  <div class="label">Cockapoo</div>
 <div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
</div>

如果我了解您将要做什么，我认为它将与风格变化非常有效。

Answer 2

不要使用浮子。它们是一种过时且麻烦的技术。相反，使用内联容器或 flexbox 。

.box-wrapper {
  display: inline-block;
  width: 600px;
}

.label {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.box-left {
  border: 1px solid black;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

<div class="box-wrapper">
  <div class="label">Akita Inu</div>
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

<div class="box-wrapper">
  <div class="label">Cockapoo</div>
  <div class="box-left"></div>
  <div class="box-right"></div>
</div>

Answer 3

为此使用Flex。通常应该避免浮子和绝对。

.label {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.box-left,
.box-right {
  border: 1px solid black;
  width: 600px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.container {
  display: flex;
}

<div class='container'>
  <div>
    <div class="label">Akita Inu</div>
    <div class="box-left"></div>
  </div>
  
  <div>
    <div class="label"> </div>
    <div class="box-right"></div>
  </div>
</div>

<div class='container'>
  <div>
    <div class="label">Cockapoo</div>
    <div class="box-left"></div>
  </div>

  <div>
    <div class="label"> </div>
    <div class="box-right"></div>
  </div>
</div>

Answer 4

添加clear： to .box-left将其放在上面的浮动项目下方。要将标签放在上方的Divs下方，请将其应用于.label

.label {
  clear: both;
}

.box-left {
  clear: both;
  float: left;
  border: 1px solid red;
  width: 250px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

.box-right {
  float: right;
  border: 1px solid blue;
  width: 250px;
  height: 250px;
  margin-top: 15px;
  margin-bottom: 15px;
}

<div class="label">Akita Inu</div>
<div class="box-left"></div>
<div class="box-right"></div>


<div class="label">Cockapoo</div>
<div class="box-left"></div>
<div class="box-right"></div>

<div class="label">Corgi</div>
<div class="box-left"></div>
<div class="box-right"></div>

<div class="label">Shiba Inu</div>
<div class="box-left"></div>
<div class="box-right"></div>