2行5列全宽

Question

我想知道是否有可能有一个网页是沿着页面的整个宽度5个相等的列，在单个视图端口中有2行，所以没有低于折叠。

如果是这样，我该如何去做这件事？

Answer 1

溶液。

• flex-flow: row wrap;显示多行的列。
• flex-basis: 20%;，使每一列的width它的20％的父

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: none; 
 
    outline: none; 
 
} 
 
div.cont { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    height: 100vh; 
 
} 
 
div div { 
 
    flex: 1; 
 
    flex-basis: 20%; 
 
    text-align: center; 
 
    height: 50vh; 
 
} 
 
div div:nth-child(1) { 
 
    background-color: #eee; 
 
} 
 
div div:nth-child(2) { 
 
    background-color: #ddd; 
 
} 
 
div div:nth-child(3) { 
 
    background-color: #ccc; 
 
} 
 
div div:nth-child(4) { 
 
    background-color: #bbb; 
 
} 
 
div div:nth-child(5) { 
 
    background-color: #aaa; 
 
} 
 
div div:nth-child(6) { 
 
    background-color: #aaa; 
 
} 
 
div div:nth-child(7) { 
 
    background-color: #bbb; 
 
} 
 
div div:nth-child(8) { 
 
    background-color: #ccb; 
 
} 
 
div div:nth-child(9) { 
 
    background-color: #ddd; 
 
} 
 
div div:nth-child(10) { 
 
    background-color: #eee; 
 
}

<div class="cont"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
    <div>10</div> 
 
</div>

Answer 2

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12 color-2 text-center heading"><h1>Header</h1></div> 
    </div> 
    <div class="row fudged-columns"> 
     <div class="col-sm-2 col-sm-offset-1 diff-color"></div> 
     <div class="col-sm-2 diff-color color-1"></div> 
     <div class="col-sm-2 diff-color color-2"></div> 
     <div class="col-sm-2 diff-color color-3"></div> 
     <div class="col-sm-2 diff-color color-4"></div> 
    </div> 
    <div class="row rewired-css"> 
     <div class="col-sm-5ths diff-color"></div> 
     <div class="col-sm-5ths diff-color color-1"></div> 
     <div class="col-sm-5ths diff-color color-2"></div> 
     <div class="col-sm-5ths diff-color color-3"></div> 
     <div class="col-sm-5ths diff-color color-4"></div> 
    </div> 
</div> 

CSS

body {background: #000;} 
.heading {height: 100px;} 
.diff-color { 
    height: 150px; 
    background: #CCC; 
} 
.color-1 {background: #777;} 
.color-2 {background: #DDD;} 
.color-3 {background: #AAA;} 
.color-4 {background: #333;} 

/* Rewired way .rewired-css */ 
.col-xs-5ths, 
.col-sm-5ths, 
.col-md-5ths, 
.col-lg-5ths { 
    position: relative; 
    min-height: 1px; 
    padding-right: 10px; 
    padding-left: 10px; 
} 

.col-xs-5ths { 
    width: 20%; 
    float: left; 
} 
@media (min-width: 768px) { 
.col-sm-5ths { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: 992px) { 
    .col-md-5ths { 
     width: 20%; 
     float: left; 
    } 
} 
@media (min-width: 1200px) { 
    .col-lg-5ths { 
     width: 20%; 
     float: left; 
    } 
} 

demo

reference

Answer 3

在css中提供行宽= 100％，然后给每列设置width = 20％。这将调整为每宽度的页

Answer 4

<div style="width:300px;height:300px;background-size:100% 100%;background-color:red"> 
<div style="width:100%;height:50%;background-size:100% 100%;background-color:green"> 
<div style="width:20%;height:100%;background-size:100% 100%;background-color:cyan;float:left"></div> 
<div style="width:20%;height:100%;background-size:100% 100%;background-color:grey;float:left"></div> 
<div style="width:20%;height:100%;background-size:100% 100%;background-color:blueviolet;float:left"></div> 
<div style="width:20%;height:100%;background-size:100% 100%;background-color:chartreuse;float:left"></div> 
<div style="width:20%;height:100%;background-size:100% 100%;background-color:coral;float:left"></div> 
</div> 
<div style="width:20%;height:50%;background-size:100% 100%;background-color:Darkcyan;float:left"></div> 
<div style="width:20%;height:50%;background-size:100% 100%;background-color:Darkred;float:left"></div> 
<div style="width:20%;height:50%;background-size:100% 100%;background-color:Darkorange;float:left"></div> 
<div style="width:20%;height:50%;background-size:100% 100%;background-color:pink;float:left"></div> 
<div style="width:20%;height:50%;background-size:100% 100%;background-color:lightgreen;float:left"></div> 

</div> 

Answer 5

使用

display: flex尝试这一个

*{ 
     margin: 0; 
     padding: 0; 
    } 
    html, body{ 
     height: 100%; 
    } 
    .row-container{ 
     display: flex; 
     flex-direction: column; 
     height: 100%; 
    } 
    .half-row{ 
     display: flex; 
     flex: 1 1 0; 
     flex-direction: row; 
     height: 50%; 
    } 
    .column{ 
     background-color: #abc; 
     border: 1px solid grey; 
     flex: 1 1 0; 
    } 


<div class="row-container"> 
    <div class="half-row"> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    </div> 
    <div class="half-row"> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    </div> 
</div>