使浮动文本中断到下一行

Question

我该怎么做：

像这样走到下一行？

http://jsfiddle.net/frank_o/06ewqwun/

HTML：

<div class="test">
  <h1>Test test test test</h1>

  <!-- This div has to be here -->

  <div>
    <p>Another test another test</p>
  </div>
</div>

CSS：

.test { border: 1px solid black; width: 300px; }
h1 { float: left; border: 1px solid #ccc; }

/* Has no effect */

p { word-wrap: break-word; }

Answer 1

如果您仍想坚持使用该HTML结构，可以试试这个：

您可以在容器div上使用和使用CSS line-height属性

像：

.YOURDIVCLASS{
    display: inline;
    line-height: 1.5em;
}

您可能还想重置h1标记的默认填充和边距。

h1{
  margin: 0;
  padding: 0;
}

<强> HERE'S A SAMPLE IN jsFIDDLE

Answer 2

如果您不想制作元素inline，可以尝试重置边距。

HTML：

<div class="box">
  <h1>Lorem ipsum.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, voluptates.</p>
</div>

CSS：

.box {
  border: 1px solid #ddd;
  width: 320px;
}

.box h1 {
  float: left;
  margin-bottom: -6px;
}

.box p {
  margin-top: 35px;
}

在此处查看实时示例：http://jsfiddle.net/cdog/xaL7sarm/。

Answer 3

您必须将h1放入您的div：

<div class="test">
  <div>
    <h1>Test test test test</h1>
      <p>Another test another test, and a bit more test</p>
  </div>
</div>

检查updated Fiddle