Html 如何在一个div中创建多个列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10676881/
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 to create multiple columns in a div
提问by Josh Dempsey
I was wondering how I would create multiple columns in a div. It's for a footer and I want a site map, links to social media etc.
我想知道如何在 div 中创建多个列。它用于页脚，我想要一个站点地图、社交媒体链接等。
I was going to use <multicol>but I then read that it was deprecated so it kind of put me off using it.
我打算使用，<multicol>但后来我读到它已被弃用，所以我有点不想使用它了。
Basically I have an 80% wide DIV and I need three columns in it. Preferably each with a margin.
基本上我有一个 80% 宽的 DIV，我需要其中的三列。最好每个都有一个边距。
Css:
css：
div.bottom
{
height: 200px;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: none;
margin-bottom: none;
border-top: 4px solid #00ccff;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #575757;
}
I just need the HTML now. Thank you for your time.
我现在只需要 HTML。感谢您的时间。
回答by Czechnology
Create three divs with float: left;(or right) and give them an exact width.
使用float: left;（或正确）创建三个 div并给它们一个精确的width.
<div class="bottom">
<div style="float: left; width: 33%;"></div>
<div style="float: left; width: 33%;"></div>
<div style="float: left; width: 33%;"></div>
</div>
See it in action.
看到它在行动。
