在css中添加换行符答案

【问题标题】：Adding a newline in css在css中添加换行符
【发布时间】：2014-12-22 20:50:56
【问题描述】：

我正在寻找最简单的方法来分解内联阻止的 div 集合，而无需使用额外的标记（例如 br）。

我一开始天真地认为下面的方法可以解决问题，只是“四”最终也出现在自己的一行上，我不太明白。

.inline {
  display:inline-block;
}

.newline {
  display:block;
}

<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>

我已经尝试过使用 Stackoverflow 上的 :after/:before 的解决方案，但只有当我的元素是内联而不是内联块时，这些解决方案才对我有用。

可惜我也需要支持IE6！

尝试使用浮动

以下示例在 IE 6 中无法正常显示

.inline {
  float: left;
  width: 50px;
  height: 50px;
  background: #F00;
}
.newline {
  clear: left;
}

<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>

IE 6 中的结果

【问题讨论】：

根据caniuse.com/#feat=inline-block IE 6 不支持inline-block 除了默认显示为inline 的元素，所以你似乎有一个更根本的问题。
"display:block" 样式强制元素在自己的一行上，而不仅仅是开始一个新行。这就是为什么您也会在新行中看到第四项。
使用<br>有什么问题？这就是它的用途。
@AnthonyWebster - 在上面，我正在使用this example here
@misterManSam 谢谢。我弄清楚为什么它在 IE 8+ 中对我不起作用，没有 Doctype (duh)。所以至少我会让它在 IE8+ 中工作，但我仍然需要 IE 6 和 7（遗憾的是，这个决定不在我的掌控之中）。即使是单独的 css 也可以，因为我可以根据浏览器和版本注入不同的 css...

标签： css internet-explorer internet-explorer-6

【解决方案1】：

对于 IE6 和其他旧浏览器，您需要添加一条清晰的线，例如使用以下代码：

<div class="inline">one</div>
<div class="inline">two</div>
<div class="visualClear"></div>
<div class="inline">three</div>
<div class="inline">four</div>


.inline {
     float: left;
     width: 50px;
     height: 50px;
     background: #F00;
}   
.visualClear {
     clear: both;
     display: block;
}

我知道它不是很漂亮，但它会为你工作。

【讨论】：