div 换行其他内容

Question

我似乎对一个 div 包装其他内容有问题。

如果我在 3 个 p 元素和 div 元素之间添加一些额外的 HTML 元素，它工作得很好。

但是，当我按照下面的代码所示放置它们时，似乎 .disc 包裹了 3 个 p 元素 - 即它们出现在 div.[= 中23=]

我在自己的 div 中也有 3 个 p 元素，但是，它们会作为 "disc" class 的一部分出现。

最初，我指定了一个完整的全能margin。然后，在寻找这个问题的原因时，我遇到了倒塌的边距。所以，我更改了我的 margin 以仅反映顶部和左侧的值，但这似乎也没有解决问题。

为什么会这样？

.abbr {
  float: left;
  display: inline-block;
  width: 30%;
  text-align: center;
  background-color: white;
  border: 2px solid black;
  margin: 15px 26px;
  font-weight: bold;
}
.disc {
  margin-top: 2em;
  margin-left: 2em;
  border: 2px solid black;
  text-align: center;
  background-color: white;
}
#discHeader {
  font-weight: bold;
}
#discHeaderLine {
  border-top: 2px solid black;
}

<p class="abbr">Line 1</p>
<p class="abbr">Line 2</p>
<p class="abbr">Line 3</p>

<div class="disc">
  <p id="discHeader"><strong>ABC</strong></p>
  <p class="clear line" id="discHeaderLine"></p>
  <p>some text</p>
  <p>some more text</p>
  <p>text</p>
  <p>final text</p>
</div>

Answer 1

你的问题

您正在使用 float:left

解释+通常的解决方法

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

因为它脱离了正常流程，所以您需要清除它，使用 clear 属性.

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.

The floats that are relevant to be cleared are the earlier floats within the same block formatting context.

针对您的问题的具体解决方案

如果您正在使用 inline-block，则不需要 float:left，因为 inline-block 使元素成为块级元素，而 float:left 使元素成为块级元素也是。

因此不需要清除任何东西。

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.wrap {
  margin-left: 2em
}
.abbr {
  display: inline-block;
  width: calc(100%/3);
  text-align: center;
  background-color: white;
  border: 2px solid black;
  margin: 15px 0;
  font-weight: 700
}
.disc {
  margin-top: 2em;
  margin-left: 2em;
  border: 2px solid black;
  text-align: center;
  background-color: white;
}
#discHeader {
  font-weight: bold;
}
#discHeaderLine {
  border-top: 2px solid black;
}

<div class="wrap">
  <p class="abbr">Line 1</p><!--
--><p class="abbr">Line 2</p><!--
--><p class="abbr">Line 3</p>
</div>
<div class="disc">
  <p id="discHeader"><strong>ABC</strong>
  </p>
  <p class="clear line" id="discHeaderLine"></p>
  <p>some text</p>
  <p>some more text</p>
  <p>text</p>
  <p>final text</p>
</div>

Answer 2

你可以试试这个方法清除浮动。

body {
 margin:0;
 padding:0;
}
.content {
 display:inline-block;
 width:100%;
}
.content p {
 float:left;
 width:28%;
 text-align: center;
 background-color: white;
 border: 2px solid black;
 margin: 15px 2%;
 font-weight: bold;
}
.disc {
 width:96%;
 margin:2em auto 0 auto;
 border: 2px solid black;
 text-align: center;
 background-color: white;
}
#discHeader {
 font-weight: bold;
}
#discHeaderLine {
 border-top: 2px solid black;
}

<div class="content">
  <p>Line 1</p>
  <p>Line 2</p>
  <p>Line 3</p>
</div>
<div class="disc">
  <p id="discHeader"><strong>ABC</strong></p>
  <p class="clear line" id="discHeaderLine"></p>
  <p>some text</p>
  <p>some more text</p>
  <p>text</p>
  <p>final text</p>
</div>

Answer 3

您的 abbr 元素是浮动的。添加 clear: both; 到 .disc:

.abbr {
  float: left;
  display: inline-block;
  width: 30%;
  text-align: center;
  background-color: white;
  border: 2px solid black;
  margin: 15px 26px;
  font-weight: bold;
}
.disc {
  margin-top: 2em;
  margin-left: 2em;
  border: 2px solid black;
  text-align: center;
  background-color: white;
  clear: both;
}
#discHeader {
  font-weight: bold;
}
#discHeaderLine {
  border-top: 2px solid black;
}

<p class="abbr">Line 1</p>
<p class="abbr">Line 2</p>
<p class="abbr">Line 3</p>

<div class="disc">
  <p id="discHeader"><strong>ABC</strong></p>
  <p class="clear line" id="discHeaderLine"></p>
  <p>some text</p>
  <p>some more text</p>
  <p>text</p>
  <p>final text</p>
</div>

div 换行其他内容

div wrapping other content

html

css

margins

你的问题

解释+通常的解决方法

针对您的问题的具体解决方案