我不知道自己在做什么错，我无法在一个div中获得3个div来连续显示水平。他们似乎像一列一样彼此堆叠，我要一行。
我想使用“％”中的宽度值，因为我希望它是动态的而不是固定的。
我觉得错误可能是因为我没有为页面定义100％的完整比例宽度，因此33,33％不能相对。
* {
box-sizing: border-box;
}
div {
* background-color: gray;
border: 1px solid black;
}
div.header {
padding: 20px;
text-align: center;
}
div.column {
float: left;
width: 33, 33%;
padding: 15px;
}
div.row:after {
display: table;
clear: both;
content: "";
}
div.footer {
text-align: center;
}<div class="header">
<h2>Rubrik</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
<div class="row">
<div class="column">
<h2>Column</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
<div class="column">
<h2>Column</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
<div class="column">
<h2>Column</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>提前致谢！
div.column {
float: left;
width: 33.33%;
padding: 15px;
}
使用 。代替 ，
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句