Html 如何并排显示 2 个部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3778201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I display 2 sections side-by-side?
提问by Matt Norris
I have following HTML code:
我有以下 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>
And I'd like to display Section 1on the left and Section 2on the right instead of vertically like they normally appear. The parent section surrounding them is indented 120px, and I'd like to preserve that.
我想在左侧显示第 1部分，在右侧显示第 2部分，而不是像通常那样垂直显示。围绕它们的父部分是缩进的120px，我想保留它。
How do I accomplish this?I tried float: lefton Section 1and display: inlineon the parent section, but those seemed to cause Section 2to "break out" of its parent section.
我该如何实现？我尝试float: left了第 1 节和display: inline父节，但这些似乎导致第 2 节“脱离”了其父节。
回答by Ciaran Archer
Float them both left with a set width on each section and you'll be OK, like so:
将它们都向左浮动，每个部分都有一个设定的宽度，你就可以了，像这样：
<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>
No need to change your markup this way.
无需以这种方式更改您的标记。
Also here for further info on the CSS box model: http://css-tricks.com/the-css-box-model/
也在这里了解有关 CSS 盒模型的更多信息：http: //css-tricks.com/the-css-box-model/
回答by Jeaf Gilbert
You have to add overflow:hidden;to the parent.
你必须添加overflow:hidden;到父级。
Preview:
预览：
CSS:
CSS：
<style>
section { border:1px solid red; padding:10px; overflow:hidden; }
section > section { float:left; }
.indent-1 { padding-left:120px; }
</style>
HTML:
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>
回答by KhanS
Have section1 and section2 in separate div's and try float: lefton section1 div and float: righton section2 div.
将第 1 节和第 2 节放在单独的 div 中，然后尝试float: left使用第 1 节 div 和第float: right2 节 div。
回答by Ralf de Kleine
<style>
section.left{float:left;}
</style>
<section class="indent-1">
<!-- Section 1 -->
<section class="left">
<div>Some content</div>
<div>Some more</div>
</section>
<!-- Section 2 -->
<section>
<div>Some content</div>
<div>Some more</div>
</section>
</section>
