左右浮动div,左边div需要100%,右边固定尺寸

时间:2012-05-23 14:04:35

标签: css html

我希望div对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>

我知道我可以使用表来实现这一目标,但是如何使用div的

来实现这一目标

1 个答案:

答案 0 :(得分:0)

你是说这个?: http://jsfiddle.net/JPPaf/

如果您要使用border,则在内部嵌入另一个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>