用 CSS 的 float:left right 该如何布局？

Yanbin_Q 2009-05-08 03:39:46

帮我看看这个代码，是从一个 blog 页面中截的片断



<HTML><HEAD><TITLE>Unmi 的个人空</TITLE>

<META http-equiv=Content-Type content="text/html; charset=utf-8">

<style type="text/css">

#content {

	OVERFLOW: hidden; ZOOM: 1

}

.xspace-layout1 #sideleft {

	FLOAT: left; WIDTH: 190px;

}

.xspace-layout1 .mainarea-side {

	FLOAT: right; MARGIN-LEFT: 200px! important; WIDTH: 700px

}

.xspace-layout1 DIV.mainarea-side {

	DISPLAY: inline; MARGIN-LEFT: 0px! important

}



.sidearea .xspace-blocktitle {

	LINE-HEIGHT: 24px; BORDER-BOTTOM: #600 1px solid; HEIGHT: 22px

}

#mainarea .xspace-blocktitle {

	BORDER-RIGHT: #6ea630 1px solid; BORDER-TOP: #6ea630 1px solid; #ffffd6; BORDER-LEFT: #6ea630 1px solid; LINE-HEIGHT: 28px; BORDER-BOTTOM: #6ea630 1px solid; HEIGHT: 26px

}



#wrap {

	BORDER-RIGHT: #969694 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #969694 1px solid; PADDING-LEFT: 2px; PADDING-BOTTOM: 10px; MARGIN: 1em auto auto; BORDER-LEFT: #969694 1px solid; WIDTH: 98%; PADDING-TOP: 10px; BORDER-BOTTOM: #969694 1px solid; TEXT-ALIGN: left

}



.xspace-sideblock {

	BORDER-RIGHT: #600 1px solid; BORDER-TOP: #600 1px solid;BORDER-LEFT: #600 1px solid; BORDER-BOTTOM: #600 1px solid

}



</style>



</HEAD>

<BODY>

<DIV id=wrap>

    <DIV class=xspace-layout1 id=content>

        <DIV class=mainarea-side id=mainarea>

          <DIV class=xspace-blocktitle>我的日志</DIV>

        <DIV>

    </DIV></DIV>

    <DIV class=sidearea id=sideleft>

        <DIV class=xspace-sideblock>

            RSS订阅

        </DIV>

    </DIV>

    </DIV>

</DIV>

</BODY></HTML>

上面代码用了两个 <div>, mainarea float 在 right, sideleft float 在 left。把右边的 content 放在 html 代码的前面是为了让这块内容在网页中优先加载。现在有个问题了，无法让 mainarea填充除去 sideleft 外剩下的宽度了。在对 mainarea 设定样式时用的是一个宽度值 700：

.xspace-layout1 .mainarea-side {
FLOAT: right; MARGIN-LEFT: 200px! important; WIDTH: 700px
}

这个宽度值无法确定是多少合适，用百分比值也没有合适的值，造成现在浏览该页面的效果是：在改变页面宽度时，sideleft 和 mainarea 之间的距离总是在变化，而我想要达到的效果是不管网页窗口怎么变，mainarea 填充除 sideleft 后剩下的部分，sideleft 和 mainarea 的间距总是不变。

有一点幸运的是，在 IE 中有一种处理办法，就是在 CSS 中用 expression 表达式，即在 <style> 标记中再加上这样一个样式：

#mainarea{
WIDTH: expression(document.getElementById('wrap').offsetWidth-document.getElementById('sideleft').offsetWidth-30);
}

网页渲染后计算实际占的宽度，可是这样办法只能在 IE 中有效，在其他浏览器中就不行了，包括 IE 8 下也不支持之种做法。

谁能帮我在只改 CSS 的情况下达到用 expression 的效果。

...全文

774 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

mike_24 2009-05-10

打赏
举报

yuanmanguo 2009-05-08

打赏
举报

mark

lonelyriver 2009-05-08

打赏
举报

……

kuaiying001 2009-05-08

打赏
举报

可以用table试试，table的两个td，如果table占满整行的话，某个td就能占据另一个td的剩余空间

xiaojing7 2009-05-08

打赏
举报

在使用 float:进行布局的时候，应该加上 clear:both;

上海之众文化传播有限公司 2009-05-08

打赏
举报

CSS布局常用的方法：float:none|left|right
取值：
none: 默认值。对象不飘浮
left: 文本流向对象的右边
right: 文本流向对象的左边

它是怎样工作的，看个一行两列的例子
xhtml:
<div id="wrap">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div> /*这是违背web标准意图的，只是想说明在它下面的元素需要清除浮动*/
</div>
CSS:
#wrap{width:100;height:auto;}
#column1{float:left;width:40;}
#column2{float:right;width:60;}
.clear{clear:both;}

xxf_xu 2009-05-08

打赏
举报

要想浮动的话这个是一定要加的，要不然会影响后面的布局

<DIV class=sidearea id=sideleft>
......
</DIV>

这个div后面还有没有同等级的其他html元素了？
有的话在那里面给个{clear:both;}属性也行的

Yanbin_Q 2009-05-08

打赏
举报

非常谢谢，楼上在保持 mainarea-side 和 sideleft 的顺序情况下确实能布局好页面。学到一手。

不过，不好意思，一开始没看到
.clear {clear:both;}
这个样式，但是需要在源文件中加个
<br class="clear"/>

实际我是在自己网上注册的博客中修改博客模板，这个站点的博客模板只能自定义样式，而不能修改原有的 html 代码，所以我希望的是只在修改样式的情况下达到预期的效果。

xxf_xu 2009-05-08

打赏
举报

那这样呢？



<style type="text/css">

#content {width:900px; border:1px solid #ccc;}

#sideleft {float:left; width:598px; height:400px; border:1px solid red;}

#mainarea {float:right; width:298px; height:300px; border:1px solid blue;}

.clear {clear:both;}

</style>



<DIV id=wrap>

    <DIV class=xspace-layout1 id=content>

        <DIV class=mainarea-side id=mainarea>

          <DIV class=xspace-blocktitle>我的日志</DIV>

          <DIV></DIV>

        </DIV>

        <DIV class=sidearea id=sideleft>

           <DIV class=xspace-sideblock>

               RSS订阅

           </DIV>

        </DIV>

        <br class="clear" />

    </DIV>

</DIV>

Yanbin_Q 2009-05-08

打赏
举报

to 楼上的，谢谢你的回复。把 sideleft 和 mainarea 调个位，自左向右流式布局是没问题的，但在 blog 中把 mainarea 放在 sideleft 之前是为了让 mainarea 中的日志内容按照 html 代码顺序优先加载。所以希望是不能在互换 sideleft 和 mainarea 的情况下得到所要的效果。

xxf_xu 2009-05-08

打赏
举报

不太明白你的意思，试试看行不行



<style type="text/css">

#content {width:900px;}

#sideleft {float:left; width:598px; height:400px; border:1px solid red;}

#mainarea {float:left; width:298px; height:300px; border:1px solid red;}

.clear {clear:both;}

</style>



<DIV id=wrap>

    <DIV class=xspace-layout1 id=content>

        <DIV class=sidearea id=sideleft>

           <DIV class=xspace-sideblock>

               RSS订阅

           </DIV>

        </DIV>

        <DIV class=mainarea-side id=mainarea>

          <DIV class=xspace-blocktitle>我的日志</DIV>

          <DIV></DIV>

        </DIV>

        <br class="clear" />

    </DIV>

</DIV>