如何将两个div放在一个5列div中？
如何将两个div放在一个5列div中？
提问于 2015-09-10 17:37:02
当我想在一条线上显示五张图片或五组文本时，我有一个5列div，我在我的整个网站使用。在这个特别的div中，我想跨越方框-5-3和方框-5--4，这样方框-5-3中的内容就会跨越这两个div。
我知道我可以轻松地创建另一个div，并将其中一个div从20%更改为40%，但是最简单的方法是什么呢？
jsfiddle: http://jsfiddle.net/huskydawgs/4rj47uvn/
这里是我的
<div class="container-5col">
<div class="box-5col-1">
</div>
<div class="box-5col-2">
<img alt="Apple" height="173" src="http://weknowyourdreams.com/images/apple/apple-06.jpg" width="173" /></div>
<div class="box-5col-3">
<p><strong>Apples</strong><br />
The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
<ul>
<li>
Gala</li>
<li>
Honeycrisp</li>
<li>
Pink Lady</li>
</ul></div>
<div class="box-5col-4">
</div>
<div class="box-5col-5">
</div>
</div>这里是我的CSS:
.container-5col {
display: flex;
justify-content: center;
}
.container-5col > div {
margin: 10px;
padding: 10px;
text-align: center;
}
.box-5col-1 {
width: 20%;
}
.box-5col-2 {
width: 20%;
}
.box-5col-3 {
width: 20%;
}
.box-5col-4 {
width: 20%;
}
.box-5col-5 {
width: 20%;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2015-09-10 18:02:09
我不完全确定你想要做什么，但因为你使用的是柔性盒。
我假设第一，第四和第五次方是零宽度，另外两个div扩展到fill...except，第二位，保持在20%。对吗？
* {
box-sizing: border-box;
margin: 0;
}
img {
display: block;
max-width:100%;
height:auto;
}
.container-5col {
display: flex;
}
.container-5col > div {
text-align: center;
}
[class^="box-5col-"] {
background: lightblue;
flex: 0 0 auto;
}
.box-5col-2 {
flex: 0 0 20%;
}
.box-5col-3 {
flex: 1 0 20%;
}<div class="container-5col">
<div class="box-5col-1"></div>
<div class="box-5col-2">
<img alt="Apple" height="173" src="http://weknowyourdreams.com/images/apple/apple-06.jpg" width="173" />
</div>
<div class="box-5col-3">
<h3>Apples</h3>
<p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
<ul>
<li>
Gala</li>
<li>
Honeycrisp</li>
<li>
Pink Lady</li>
</ul>
</div>
<div class="box-5col-4"></div>
<div class="box-5col-5"></div>
</div>
备用选项
前2div保持不变，但第三div扩展，而4和5是零宽度。
Codepene Demo
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32508348
复制相关文章
相似问题
腾讯云开发者
