CSS如何实现2列中右列固定而左列自适应宽度？
2列中左列固定而右列自适应宽度是很容易实现的，而我看到有些网站是2列中右列固定而左列自适应宽度的，如http://www.jasonsantamaria.com/，这是如...
2列中左列固定而右列自适应宽度是很容易实现的，而我看到有些网站是2列中右列固定而左列自适应宽度的，如http://www.jasonsantamaria.com/，这是如何实现的？
我尝试了很多次，都不行。左列固定而右列自适应宽度是通过不设置right的float和width的属性来实现的，但如果换成右列固定而左列自适应宽度，这样貌似就行不通了。如果把left的div的float设为left，而不设width属性的话，那么无论如何怎样这个left的div都不会自适应宽度。而如果不设置float和width属性的话，左列的确会自适应宽度了，但却独占了该行，把右列挤到下一行去了，也就实现不了并列。
我写的代码如下，但不能实现
#left{
background-color:#FF0A33;
height:200px;
float:left;/*不设置float属性的话，会把right挤到下一行，但设置了就不会自适应宽度了*/
}
#right{
background-color:green;
width:200px;/*固定了右列宽度*/
height:200px;
float:right;/*设置float属性为right，保证右列固定在右侧*/
}
请教CSS高手啊…… 展开
我尝试了很多次，都不行。左列固定而右列自适应宽度是通过不设置right的float和width的属性来实现的，但如果换成右列固定而左列自适应宽度，这样貌似就行不通了。如果把left的div的float设为left，而不设width属性的话，那么无论如何怎样这个left的div都不会自适应宽度。而如果不设置float和width属性的话，左列的确会自适应宽度了，但却独占了该行，把右列挤到下一行去了，也就实现不了并列。
我写的代码如下，但不能实现
#left{
background-color:#FF0A33;
height:200px;
float:left;/*不设置float属性的话，会把right挤到下一行，但设置了就不会自适应宽度了*/
}
#right{
background-color:green;
width:200px;/*固定了右列宽度*/
height:200px;
float:right;/*设置float属性为right，保证右列固定在右侧*/
}
请教CSS高手啊…… 展开
3个回答
展开全部
根据那个网站的CSS代码改的.
<style>
#maincol {
float: left;
width: 68%;
font-size: 100%;
border-right: 1px solid #000;
margin-right: 0px;
background-color:#0033FF
}
#maincol .col{
width: 100%;
border: none;
}
#subcol {
float: right;
width: 32%;
background-color:#FF0000
}
#subcol .col {
width: 210px;
padding: 20px;
font-size: 85%;
line-height: 1.5em;
}
</style>
<!-- BEGIN maincol -->
<div id="maincol">
<!-- BEGIN maincol col -->
<div id="col">
<!-- END maincol col -->dsdsds
</div>
<!-- END maincol -->
</div>
<!-- BEGIN subcol col -->
<div id="subcol">
<div class="col">
<!-- END subcol col -->
</div>
<!-- END subcol -->
</div>
<style>
#maincol {
float: left;
width: 68%;
font-size: 100%;
border-right: 1px solid #000;
margin-right: 0px;
background-color:#0033FF
}
#maincol .col{
width: 100%;
border: none;
}
#subcol {
float: right;
width: 32%;
background-color:#FF0000
}
#subcol .col {
width: 210px;
padding: 20px;
font-size: 85%;
line-height: 1.5em;
}
</style>
<!-- BEGIN maincol -->
<div id="maincol">
<!-- BEGIN maincol col -->
<div id="col">
<!-- END maincol col -->dsdsds
</div>
<!-- END maincol -->
</div>
<!-- BEGIN subcol col -->
<div id="subcol">
<div class="col">
<!-- END subcol col -->
</div>
<!-- END subcol -->
</div>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你的css是没有问题的，你把设置的left和right的div位子换一下
比如你设置右边自适应的时候布局是这样的
<body>
<div id="left">div left</div>
<div id="right">div right</div>
</body>
设置左边自适应的时候布局换成
<body>
<div id="left">div left</div>
<div id="right">div right</div>
</body>
比如你设置右边自适应的时候布局是这样的
<body>
<div id="left">div left</div>
<div id="right">div right</div>
</body>
设置左边自适应的时候布局换成
<body>
<div id="left">div left</div>
<div id="right">div right</div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
根据那个网站的CSS代码改的.
<style>
#maincol
{
float:
left;
width:
68%;
font-size:
100%;
border-right:
1px
solid
#000;
margin-right:
0px;
background-color:#0033FF
}
#maincol
.col{
width:
100%;
border:
none;
}
#subcol
{
float:
right;
width:
32%;
background-color:#FF0000
}
#subcol
.col
{
width:
210px;
padding:
20px;
font-size:
85%;
line-height:
1.5em;
}
</style>
<!--
BEGIN
maincol
-->
<div
id="maincol">
<!--
BEGIN
maincol
col
-->
<div
id="col">
<!--
END
maincol
col
-->dsdsds
</div>
<!--
END
maincol
-->
</div>
<!--
BEGIN
subcol
col
-->
<div
id="subcol">
<div
class="col">
<!--
END
subcol
col
-->
</div>
<!--
END
subcol
-->
</div>
<style>
#maincol
{
float:
left;
width:
68%;
font-size:
100%;
border-right:
1px
solid
#000;
margin-right:
0px;
background-color:#0033FF
}
#maincol
.col{
width:
100%;
border:
none;
}
#subcol
{
float:
right;
width:
32%;
background-color:#FF0000
}
#subcol
.col
{
width:
210px;
padding:
20px;
font-size:
85%;
line-height:
1.5em;
}
</style>
<!--
BEGIN
maincol
-->
<div
id="maincol">
<!--
BEGIN
maincol
col
-->
<div
id="col">
<!--
END
maincol
col
-->dsdsds
</div>
<!--
END
maincol
-->
</div>
<!--
BEGIN
subcol
col
-->
<div
id="subcol">
<div
class="col">
<!--
END
subcol
col
-->
</div>
<!--
END
subcol
-->
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
