如何在div中创建多个列

Jos*_*sey 19 html css text border

我想知道如何在div中创建多个列.这是一个页脚,我想要一个站点地图,社交媒体链接等.

我打算使用,<multicol>但后来我读到它已被弃用,所以它让我不再使用它.

基本上我有80%宽的DIV,我需要三列.优选地每个都具有边际.

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;
        }
Run Code Online (Sandbox Code Playgroud)

我现在只需要HTML.感谢您的时间.

Cze*_*ogy 43

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>
Run Code Online (Sandbox Code Playgroud)

看到它在行动.

  • Brad,这是因为标准的CSS盒子模型,它包括尺寸中的填充和边框.您可以使用`box-sizing`属性调整此行为. (5认同)