我有以下
HTML代码：
<section class="indent-1">
<!-- Section 1 -->
<section>
<div>Some content</div>
<div>Some more</div>
</section>
<!-- Section 2 -->
<section>
<div>Some content</div>
<div>Some more</div>
</section>
</section>
我想在左侧显示第1部分,在右侧显示第2部分,而不是像通常出现的那样垂直显示.它们周围的父节缩进了120px,我想保留它.
解决方法
将它们两个浮动,每个部分都有一个设定的宽度,你会没事的,就像这样：
<style>
.indent-1 {float: left;}
.indent-1 section {width: 50%; float: left;}
</style>
<section class="indent-1">
<!-- Section 1 -->
<section>
<div>Some content 1</div>
<div>Some more 1</div>
</section>
<!-- Section 2 -->
<section>
<div>Some content 2</div>
<div>Some more 2</div>
</section>
</section>
无需以这种方式更改标记.
另外还有关于CSS盒子型号的更多信息：http://css-tricks.com/the-css-box-model/
