HTML / CSS:创建三列的问题

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

您可以使用flex

box轻松实现此目的，这是用于所需结果的css，这也使其保持完全响应。

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

    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

您可以删除 float 并将它们设为 inline-block ，然后将ColumnContainer中存在的元素居中。

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;
    }

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