Css 如何使固定和%元素在一行中彼此并排
我希望容器以以下方式在一行中填充:Css 如何使固定和%元素在一行中彼此并排,css,layout,fixed,Css,Layout,Fixed,我希望容器以以下方式在一行中填充: 60px固定黄色 然后是剩余空间的: 20%蓝色 60%黑色 20%红色 这是我目前所拥有的(不起作用): CSS body { background-color: #fff; padding: 0px; margin:100px; } .container { overflow: hidden; padding: 0px; margin: 0px auto; width: 90%; b
- 60px固定黄色
- 20%蓝色
- 60%黑色
- 20%红色
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;
}
这是你的答案,梅萨姆: HTML:
<div class="container">
<div class="transparent_container" type="fixed">
<div class="fixed_conatiner">
<br/>
</div>
</div>
<div class="transparent_container transparent_container_2" type="resizable">
<div class="blue_container">
<br/>
</div>
<div class="black_container">
<br/>
</div>
<div class="red_container">
<br/>
</div>
</div>
</div>
.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;
display: inline-block;
width: 20%;
}
.black_container {
width:60%;
display:inline-block;
background-color: black;
}
.red_container {
width: 20%;
display:inline-block;
background-color: red;
}
.fixed_conatiner {
float:left;
background-color: yellow;
width: 60px;
}
.transparent_container[type="fixed"] {
padding:0px;
margin:0px;
width: 60px;
}
.transparent_container_2{
padding-left: 60px;
word-spacing: -1em;
}
.transparent_container[type="avazmishe"] {
padding:0px;
margin:0px;
}