简体   繁体   English

左右浮动div,左侧div需要为100%,右侧保持为固定大小

[英]float div on left and right, left div needs to be 100% and right stay right fixed size

I want to have effect with div where left div is 100% and right stay fixed 我想对div产生影响,其中div的左值为100%,右值为固定

<!DOCTYPE html>
<html>
<style>
.left {
width: 100%;
float: left;
border: #ccc solid 1px;
}
.right {
width: 50px;
float:left;
border: #987 solid 1px;
}
.main {
border: #666 solid 1px;
margin: 0px auto;
}
.clear {
clear:both;
}

</style>
<body>
<div class="main">
<div class="left">
</div>
<div class="right">
</div>
<div class="clear"></div>
</div>
</body>
</html>

I know I could use table to achieve this easy, but how can I achieve this with div's 我知道我可以使用表来实现这一目标,但是如何使用div的

You mean this?: http://jsfiddle.net/JPPaf/ 您是这个意思吗?: http : //jsfiddle.net/JPPaf/

If you're going to use borders nest another div inside and apply borders to that inner div since it will save you alot of problems. 如果要使用边框,则在其中嵌套另一个div并将边框应用于该内部div,因为这样可以节省很多问题。

<!DOCTYPE html>
<html>
<style>
.left {
margin-right:50px;
background:red;
}
.right {
width:50px;
float:right;
background:green;
}
.main {
border: #666 solid 1px;
margin: 0px auto;
}
.clear {
clear:both;
}

</style>
<body>
<div class="main">
<div class="right">
right
</div>
<div class="left">
left
</div>
<div class="clear"></div>
</div>
</body>
</html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM