Question

我创建了三个分布在90％宽度页面宽度上的列，并使用“margin：auto”在页面中心。我希望三列宽度相等，间距相等，但无法达到我想要的效果。我怎么会这样做呢？

    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        background-color: #fbe3cf;
    }

    .ColumnContainer {
        height: 100%;
        width: 90%;
        margin: auto;
    }

    .c1 {
        float: left;
        width: 30%;
        height: 70%;
        background-color: green;
    }

    .c2 {
        float: right;
        width: 30%;
        height: 70%;
        background-color: #DDDDDD;
    }

    .c3{
        float: right;
        width: 30%;
        height: 70%;
        background-color: yellow;
    }




<div class="ColumnContainer">
    <div class="c1">c1</div>
    <div class="c3">c3</div>
    <div class="c2">c2</div>
</div>

Answer 1

你可以使用弹性框轻松实现这一点，这里是所需结果的css，它也能保持完全响应。

here是关于弹性框的更详细说明以及您可以实现的目标

    html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        background-color: #fbe3cf;
    }

    .ColumnContainer {
        height: 100%;
        width: 90%;
        margin: auto;
		display:flex;
		justify-content:space-between;
    }

    .c1 {
        
        width: 30%;
        height: 70%;
        background-color: green;
    }

    .c2 {
        
        width: 30%;
        height: 70%;
        background-color: #DDDDDD;
    }

    .c3{
        
        width: 30%;
        height: 70%;
        background-color: yellow;
    }

<div class="ColumnContainer">
    <div class="c1">c1</div>
    <div class="c3">c3</div>
    <div class="c2">c2</div>
</div>

Answer 2

您可以移除浮动并将其设为inline-block，然后将ColumnContainer中的元素居中。

＆＃13;

html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
        background-color: #fbe3cf;
    }

    .ColumnContainer {
     height: 100%;
     width: 90%;
     margin: auto;
     text-align: center;
    }
    .ColumnContainer > div{
      display:inline-block;
      width:30%;
    }
    .c1 {
        height: 70%;
        background-color: green;
    }

    .c2 {
        height: 70%;
        background-color: #DDDDDD;
    }

    .c3{
        height: 70%;
        background-color: yellow;
    }

＆＃13;

<div class="ColumnContainer">
    <div class="c1">c1</div>
    <div class="c3">c3</div>
    <div class="c2">c2</div>
</div>

＆＃13;

HTML / CSS：创建三列的问题

2 个答案: