為什么文本 go 在 div 容器外？

Question

在這個例子中：

 div { width: 100px; height: 100px; border: 8px solid #333; } #boxGreen { background-color: green; position: relative; left: 150px; } #boxRed { background-color: red; float: left; }

 <div id="boxRed">Text 2</div> <div id="boxGreen"> Text 1</div>

為什么“文本 1”go 在“boxGreen”之外？ 我怎樣才能使文本框內？

Answer 1

添加顯示：inline-block； 在你的綠盒 div 里面是這樣的：

#boxGreen {
  display: inline-block;
  background-color: green;
  position: relative;
  left: 150px;
}

Answer 2

 div { width: 100px; height: 100px; border: 8px solid #333; } #boxGreen { background-color: green; position: relative; left: 50px; display: inline-block; } #boxRed { background-color: red; float: left; }

 <div id="boxRed">Text 2</div> <div id="boxGreen">Text 1</div>

您缺少display: inline-block; 在你的#boxGreen

當您制作 position 親戚時，您必須添加display: inline-block;

Answer 3

CSS

div {
  width: 100px;
  height: 100px;
  border: 8px solid #333;
}

#boxGreen {
  background-color: green;
  display: inline-block;
}

#boxRed {
  background-color: red;
    display: inline-block;
}

HTML

<div id="boxRed">Text 2</div>
<div id="boxGreen"> Text 1</div>

解決方案 1將元素標記為 display: inline-block; 在這里了解更多

解決方案2將元素包裹在另一個容器中，並將其標記為 display: flex; 在這里了解更多

問題你的綠色元素實際上並沒有與紅色元素對齊，哈哈。 它就是這樣出現的，去掉 float: left ，你會看到容器實際上在它下面。 :)

Answer 4

float很奇怪。 這可能是一件棘手的事情，因為你會遇到這樣的奇怪情況。 浮動元素基本上會被塊級元素忽略，但不會被內聯元素忽略。 因為你的綠色框是一個塊，而且里面的文字是內聯的，所以文字是下推的。

如果您從紅色框中刪除float: left ，您將看到綠色框向下移動並與文本重新對齊。 這是因為塊元素和內聯元素現在都被下推了。

如果您改為將綠色框設置為display: inline-block ，則綠色框將被浮動的紅色框推動，因為它現在是部分內聯的（盡管它不會像文本那樣換行到新行，因為它也是一個塊）。

如您所見，浮動元素有一些奇怪的行為，這就是我通常避免使用它們的原因。 除非您需要一些內聯元素來包裹其他元素，否則您通常可以使用flexbox或grid來做您需要的事情，而副作用更少。

CSS-Tricks 有一些很棒的文章可以幫助您理解floats 、 flexbox和grid 。

Answer 5

更好的解決方案是將 div 元素包裝在容器中。 之后，您可以使用 display: flex; 將其設置為行。

 .container { width: 100%; display: flex; } div#boxGreen, div#boxRed { width: 100px; height: 100px; border: 8px solid #333; margin-right: 30px; } #boxGreen { background-color: green; } #boxRed { background-color: red; }

 <div class="container"> <div id="boxRed">Text 2</div> <div id="boxGreen"> Text 1</div> </div>

Answer 6

將顯示歸因於 #boxGreen 的 inline-block 應該可以

#boxGreen {
  background-color: green;
  position: relative;
  left: 150px;
  display:inline-block;
 }