我会用一张图片向你展示我想做的事情,让你看得更清楚...
1: header 与内容占用相同的空间。
2:“aside-1”、“content”和“aside-2”在顶部水平对齐。
#flex{
display:flex;
flex-wrap: wrap;
}
aside{
max-width: 300px;
}
<div id='flex'>
<header id='header'>
</header>
<aside id='aside-1'>
</aside>
<content id='content'>
</content>
<aside id='aside-1'>
</aside>
</div>
附言如果我在标题的左侧和右侧放置另外 2 个 div,我可以完成...这将占用与标题相同的空间...但我想在没有那个 div 的情况下实现它。
我想要 Css/html 的解决方案。
谢谢!
最佳答案
我创建了一个 fiddle ,看看它。 我希望这个能帮上忙。 没有多余的 div。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
#flex {
display: flex;
flex-direction: column;
background: #ccc;
width: 100%;
}
#flex .holder {
display: flex;
flex-direction: row;
margin-top: 18px;
}
#flex .holder > * {
flex: 1;
}
aside {
max-width: 300px;
}
#header {
background: #00a652;
margin-top: -18px;
}
#aside-1 {
background: #f7941d;
}
#aside-2 {
background: #00adef;
}
#content {
background: #ed1b24;
}
<div id='flex'>
<div class="holder">
<aside id='aside-1'>
aside01
</aside>
<content id='content'>
<header id='header'>
header
</header>
Content
</content>
<aside id='aside-2'>
aside02
</aside>
</div>
</div>
关于html - 无法使 flex 显示工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42200854/