Question

我有3个div，我希望它们垂直对齐（如3列），并将大小分别设置为左右各25％，中间各50％。另外，我希望它们是无限且可滚动的，并且每一个都根据其他列调整其大小。

Answer 1

您必须使用显示网格并使用3行，就像这样。

我只是看到您要求无限的高度或类似的东西，所以当您使用vh（视口高度）时，yes网格是必经之路，与vw（视口宽度）相同

    .main{
     display: grid;
     grid-template-rows: 25vh 50vh 25vh;
     grid-template-areas: 'div1''div2''div3';
    }

    .div1{
     background-color:red;
  
     grid-area: div1;
    }

    .div2{
      background-color:green;
     grid-area: div2;
    }

    .div3{
      background-color:blue;
     grid-area: div3;
    }

<div class="main">
  <div class="div1">
     First row
  </div>
   <div class="div2">
     Second row
  </div>
    <div class="div3">
     Third row
  </div>
</div>

Answer 2

使用Flex盒非常简单。选中this awesome guide here

/* Normalize */
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Flex power */
.flex-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.flex-container > * {
  width: 100%; /* Not mandatory, but to be sure */
}
.flex-25 {
  height: 25%;
  background: red;
}
.flex-50 {
  height: 50%;
  background: blue;
}

<div class="flex-container">
  <div class="flex-25">
  </div>
  <div class="flex-50">
  </div>
  <div class="flex-25">
  </div>
</div>

编辑

/* Normalize */
html,body {
  height: 100%;
  margin: 0;
  padding: 0;
  line-height: 2em;
}

/* Flex power */
.flex-container {
  display: flex;
  align-items: stretch;
  min-height: 100%;
}
.flex-25 {
  width: 25%;
  background: #333;
  color: #EEE;
}
.flex-50 {
  width: 50%;
  background: #EEE;
}

<div class="flex-container">
  <div class="flex-25">
    <p>Not much here</p>
  </div>
  <div class="flex-50">
    <p>To infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>and infinity<br/>..<br/>..<br/>..<br/>..</p>
  </div>
  <div class="flex-25">
  </div>
</div>

Answer 3

由于flexbox具有响应能力，因此您可以使用flexbox轻松地完成此操作。创建一个充当容器的div并将其设置为display: flex;。默认情况下，Flexbox会按照您想要的方向运行，因此只需使用width: 25%;为第一和第三div创建一个类，并使用width: 50%;为第二div创建一个类

html, body {
    height: 100%;
}

.container {
    display: flex;
    min-height: 100%;
}

.sm {
    width: 25%;
    background: orange;
}
.lg {
    width: 50%;
    background: blue;
}

<div class="container">
    		<div class="sm">
    			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    		</div>
			<div class="lg"></div>
			<div class="sm"></div>
    	</div>

是否可以将主要的25％/ 50％/ 25％垂直拆分？

3 个答案:

编辑