<分区>
标签 html css fluid-layout
<分区>
我需要这样布局:
----------------------
| header |
----------------------
| N | |
| A | CONTENT |
| V | |
|-----| |
| | ----BAR---- |
|EMPTY| |
| | |
----------------------
我希望整体宽度为主体的 100%， 导航的宽度为 15%，但最小宽度为 120px。 栏(即内容 div 中的一个元素)的宽度必须是内容 div 的 100%。
在 html 中，我有一个限制，即导航 div 必须在内容 div 之前。
编辑: 我在 html 中的代码是
<div id="main">
<div id="header"></div>
<div id="nav"></div>
<div id="content><p id="bar">Title of paragraph</p></div>
</div>
我现在在 css 中的代码是:
#nav {
float: left;
width: 15%;
min-width: 120px;
}
#content{
float: right;
}
#bar {
display: block;
background-color: #D2DEE4;
}
你能帮帮我吗？
最佳答案
我更喜欢 flexbox 方法，但是请记住这不适用于 IE9 及以下版本。
Flex-basis(又名 flex: {shrink} {grow} {flex-basis})是必需的，因为 flex 不能很好地处理 css 宽度。
*{
margin: 0;
padding: 0;
}
header{
padding: 10px;
width: 100%;
background: #888;
}
.sidebar{
padding: 10px;
flex: 0 0 120px;
background: #07f;
}
.content{
padding: 10px;
background: #ddd;
width: 100%;
}
.container{
display: flex;
flex-direction: row;
}<header>
This is the header
</header>
<div class="container">
<div class="sidebar">
This is the sidebar
</div>
<div class="content">
This is the content
<br>
test
</div>
</div>关于html - 具有两列的 Css 流体布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42139475/