我有以下
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/
原文地址:https://www.jb51.cc/css/215008.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。