[英]div to fill up the remaining space (width)
hey there i have a div with 100% width (the width of computer screen can be anything) inside this width i have two child divs one with fixed width say 50px and i want the other child div to take up the remaining (100%-50px) space can anyone tell me how do i achieve this please .... 嘿,我在这个宽度内有一个宽度为100%的div(计算机屏幕的宽度可以是任何东西),我有两个子div,其中一个宽度固定,例如50px,我希望另一个子div占用其余的div(100%- 50像素)的空间,谁能告诉我如何实现这一目标....
I have done like 我做得像
<div style="width:100%;min-height:90px;">
<div style="float:left;width:50px;height:60px;">
</div>
<div style="float:left;width:90%;height:60px;">
</div>
</div>
in this code if 50 px is not the 10% of screen the there are some left blank space which I do not want 在此代码中,如果50 px不是屏幕的10%,则有一些我不需要的空白空间
Only float the fixed width element. 仅浮动固定宽度的元素。
CSS: CSS:
.container {
height: 10px;
width: 100%;
}
.right {
background: red;
height: 10px;
}
.left {
background: blue;
width: 50px;
height: 10px;
float: left;
}
HTML: HTML:
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>
You could use a table layout: 您可以使用表格布局:
HTML: HTML:
<div class="container">
<div class="fixed-width"></div>
<div class="fluid-width"></div>
</div>
CSS: CSS:
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.fixed-width {
display: table-cell;
width: 50px;
}
.fluid-width {
display: table-cell;
}
http://jsfiddle.net/myajouri/zJq8N/ http://jsfiddle.net/myajouri/zJq8N/
OR... 要么...
You could use width: calc(100% - 50px)
which is not supported in IE8 and below . 您可以使用width: calc(100% - 50px)
,这在IE8及以下版本中不受支持 。
.container {
width: 100%;
}
.fixed-width {
float: left;
width: 50px;
}
.fluid-width {
float: left;
width: calc(100% - 50px);
}
http://jsfiddle.net/myajouri/mTq6x/ http://jsfiddle.net/myajouri/mTq6x/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.