所有文本都出现在 div 之间的顶部

Question

我想将 Akita Inu 和 Cockapoo 标签制作在 box-left divs 的正上方，但大多数标签只是堆叠在 divs 之间的中间。我试着把两个 div 放在一个 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

将 clear: both 添加到 .box-left 以将其放在下方上方的浮动项目。并将标签放在它们上方的 div 下方，对 .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>

Answer 2

不要使用浮动。它们是一种过时且麻烦的技术。相反，使用 inline-block 容器或 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">&nbsp;</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">&nbsp;</div>
    <div class="box-right"></div>
  </div>
</div>

Answer 4

.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>

如果我明白你要做什么，我认为它会随着样式的改变而很好地工作。

所有文本都出现在 div 之间的顶部

All the text appears on the top between divs

html

css

position

css-float

division