Question

我想知道是否有可能在页面的整个宽度上有一个5页相等的网页，在一个视图端口中有2行，所以没有任何东西在屏幕下方。

如果是这样，我该如何做呢？

Answer 1

<强> 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 2

使用display: flex的解决方案。

flex-flow: row wrap;显示多行的列。
flex-basis: 20%;使每列的width成为其父母的20％

＆＃13;

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

＆＃13;

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

＆＃13;

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

试试这个

*{
      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>

2行5列全宽

5 个答案: