在css中添加换行符

Question

我正在寻找最简单的方法来分解内联阻塞的div，而不需要额外的标记（例如br）。

我开始天真地想着以下会做的伎俩，除了那四个＆＃39;最终也走在了自己的一条线上，我并不理解。

＆＃13;

＆＃13;

.inline {
  display:inline-block;
}

.newline {
  display:block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我尝试使用以下解决方案：在/之后在Stackoverflow上找到这些解决方案但这些只适用于我，如果我的元素是内联而不是内联块。

遗憾的是，我还需要支持IE6！

尝试使用花车

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我知道它不是很漂亮但它会对你有用。