Question

Aloha - 我一直在重新创建这个教程 - [CSS Positioning] [1] -

[1]：http://www.barelyfitz.com/screencast/html-training/css/positioning/真正理解本教程。在教程的第7步，我碰到了一些我无法弄清楚的东西。在本教程的第7步中，您将看到文本“id = div-1”位于左侧浮动的“div-1a”之上。

如果您查看我的代码笔 - http://codepen.io/DarrenHaynes/pen/gLoYpp/ - 您将看到文本“id = div-1”正在对齐“div-1a”的右侧。我不期待这个，因为“div-1”是“div-1a”的父母。因此，我无法弄清楚如何让我的codepen复制教程。

我在codepen上的代码：

HTML：

<div id="div-before">
  id = div-before
</div>
<div id="div-1">
  id = div-1
  <div id="div-1a">
    id = div-1a
    <br>
    <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
  </div>
  <div id="div-1b">
    id = div-1b<br><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan
    augue ipsum id lorem.
  </div>
  <div id=div-1c>
    id = div-1c
  </div>
</div>
<div id="div-after">
    id = div-after
</div>

CSS：

#div-before,
#div-after {
  margin: 0 auto;
  width: 400px;
  font-size: 20px;
  background-color: #8888DD;
  padding: 2px 5px;
}

#div-1 {
  position: relative;
  margin: 0 auto;
  width: 400px;
  color: white;
  padding: 20px 10px 10px 10px;
  background-color: black;
}

#div-1a {
  float: left;
  width: 200px;
  padding: 3px;
  background-color: red;
}

#div-1b {
  padding: 3px;
  background-color: green;
}

#div-1c {
  padding: 3px;
  background-color: #33D;
}

Answer 1

您可以将标题换行为＆＃34; div-1＆＃34;围绕着一个＆＃39; p＆＃39;标记：

<div id="div-before">
  id = div-before
</div>
<div id="div-1">
  <p>id = div-1</p>
  <div id="div-1a">
    id = div-1a
    <br>
    <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.
  </div>
  <div id="div-1b">
    id = div-1b<br><br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan
    augue ipsum id lorem.
  </div>
  <div id=div-1c>
    id = div-1c
  </div>
</div>
<div id="div-after">
    id = div-after
</div>

CSS：

#div-before,
#div-after {
  margin: 0 auto;
  width: 400px;
  font-size: 20px;
  background-color: #8888DD;
  padding: 2px 5px;
}

#div-1 {
  position: relative;
  margin: 0 auto;
  width: 400px;
  color: white;
  padding: 20px 10px 10px 10px;
  background-color: black;
}

#div-1a {
  float: left;
  width: 200px;
  padding: 3px;
  background-color: red;
}

#div-1b {
  padding: 3px;
  background-color: green;
}

#div-1c {
  padding: 3px;
  background-color: #33D;
}

这是Codepen：http://codepen.io/anon/pen/xRJNdZ

Float div left - 包含这个div的Parent元素的文本也是？

1 个答案: