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

您可以使用柔性框来轻松实现这一点，这里是理想的结果也保持它充分响应的CSS。

here是柔性箱，什么更详细的解释可以实现

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

 
    .ColumnContainer { 
 
     height: 100%; 
 
     width: 90%; 
 
     margin: auto; 
 
\t \t display:flex; 
 
\t \t 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元素。

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>