1

如何清除内联块？

这是我的html：

<p>Text 1</p>
<p>Text 2</p>
<p class="third">Text 3</p>
<p>Text 4</p>

我的 css 使每个 p 标签成为一个内联块，用于布局、样式、边距和填充目的。

对于响应式布局，我现在需要将 Text 3 清除到下一行，并让 Text 4 与之配合。所以在我有这个之前：

文字 1 文字 2 文字 3 文字 4

但现在我需要这个：

文字 1 文字 2

文字 3 文字 4

更新 - 有没有添加额外 HTML 标记的解决方案？

4

4 回答 4

4

一种不同的方法，不会混淆 HTML：

@media screen and (min-width: 0px) {
  p {
    float: left;
    width: 50%;
  }
  p:nth-child(even) {
    clear: right;
  }
}

@media screen and (min-width: 400px) {
  p {
    float: none;
    width: auto;
  }
}

示例： http: //jsbin.com/ALAYAlo/1/edit（调整输出窗口大小）

截图：http: //i.imgur.com/CFNyrom.png

于 2013-09-06T10:28:43.887 回答
2

使用float: left;而不是display: inline-block;那么你会很容易清除.third

演示

于 2013-09-06T10:13:10.283 回答
0

你可以使用这个CSS。

   p{
    float:left;
    margin-right:3%   /*For spacing on between paragraph*/
}
.third{
    clear:left;
}
于 2013-09-06T10:07:22.970 回答
0

您可以使用：

<p>Text 1</p>
<p>Text 2</p>
<div class="clear"></div>
<p>Text 3</p>
<p>Text 4</p>

在 CSS 中：

.clear{
   clear: both;
}
于 2013-09-06T10:04:59.297 回答