我想用以下方式在一行中填充一个容器:
- 60px 固定黄色
然后是剩余空间:
- 20% 蓝色
- 60% 黑色
- 20% 红色
这是我目前所拥有的(不起作用):
CSS
body {
background-color: #fff;
padding: 0px;
margin:100px;
}
.container {
overflow: hidden;
padding: 0px;
margin: 0px auto;
width: 90%;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 6px 0px #ccc;
}
.blue_container {
background-color: blue;
width: 20%;
float:left;
}
.black_container {
width:60%;
float:left;
background-color: black;
}
.red_container {
width: 20%;
float:left;
background-color: red;
}
.fixed_conatiner {
float:left;
background-color: yellow;
width: 60px;
}
.transparent_container[type="fixed"] {
padding:0px;
margin:0px;
width: 60px;
}
.transparent_container[type="avazmishe"] {
padding:0px;
margin:0px;
}
HTML
<div class="container">
<div class="transparent_container" type="fixed">
<div class="fixed_container"><br/></div>
</div>
<div class="transparent_container" type="resizable">
<div class="blue_container"><br/></div>
<div class="black_container"><br/></div>
<div class="red_container"><br/></div>
</div>
</div>
最佳答案
您走在正确的轨道上,您所要做的就是从带有左边距的流体容器中减去固定容器宽度。试试这个:
.transparent_container {
margin-left: 60px;
}
关于css - 如何在一行中将固定元素和 % 元素并排放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11494695/