css - 在 css 中添加换行符

Question

我正在寻找最简单的方法来分解一组内联阻塞的 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>

我尝试过使用 :after/:before 在 Stackoverflow 上找到的解决方案，但这些解决方案仅在我的元素是内联而不是内联 block 时才适用。

很遗憾我还需要支持IE6!

尝试使用 float

下面这个例子在 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 中的结果

Answer 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;
}

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