如上图,我需要这样的布局。 DIV1 包含静态文本和来自其他文件 (EX.JSON) 的 DIV2 数据(文本),因此它是可变的。关键是要根据 heigher div 的高度使两个 div 始终保持相同的高度。
注意:我不希望使用 float
。
图片提供:我在网上进行的测试之一。
最佳答案
你好
您可以按照您的要求使用 CSS3 Flexbox 轻松地做到这一点。
解决方案
这是带有工作示例的片段。我使用了 Flexbox 和您在代码注释中提供的细节。
#main {
/*Styles for sample presentation*/
padding: 20px;
border: 1px solid tomato;
}
#wrapper {
display: flex;
flex-flow: row wrap;
/* The remaining place (horizontaly) will be spread out around divs in wrapper. */
justify-content: space-around;
/*Styles for sample presentation*/
border: 1px solid royalblue;
}
#wrapper>header {
/* To keep header 100% width. */
flex: 0 0 100%;
text-align: center;
/*Styles for sample presentation*/
background-color: sandybrown;
}
#wrapper>div {
margin: 10px;
padding: 20px;
/* To center the text vertically. */
display: flex;
flex-flow: column nowrap;
justify-content: center;
/*Styles for sample presentation*/
border: 1px solid maroon;
text-align: justify;
}
#text-static {
/*Low flex basis values to keep it next to each other divs*/
flex: 1 0 30%;
}
#wrapper>div#text-json {
/*Low flex basis values to keep it next to each other divs*/
flex: 0 0 25%;
margin-left: 0;
}
<div id="main">
<div id="wrapper">
<header>
Sample header
</header>
<div id="text-static">
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym,
pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji
druków na komputerach osobistych, jak Aldus PageMaker
</div>
<div id="text-json">
a Lorem Ipsum a Lorem Ipsum a Lorem Ipsum
</div>
</div>
</div>
如果您想尝试右侧 div 的文本多于左侧的情况,您可以编辑与上面相同的代码段 there .
知识
有关 CSS3 Flexbox 的更多信息,例如在 this W3Schools网站。
我最近发现的一个很好的学习工具flexboxfroggy.com .
希望对您有所帮助。
干杯
关于css - 使用 CSS3 Flexbox 的两列和一个标题布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48898448/