有2列，希望右侧固定宽度，左侧自动宽度。_html/css

有2列，希望右侧固定宽度，左侧自动宽度。_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:48:44

原创

1368人浏览过

css

#main {
    margin-right:220px;
}
#side {
    float:right;
    width:200px;
}

使用上面的css可以达到2列的效果，但是右侧的div会在main的下方。
有什么办法可以让它与main并排吗？

main main main main main main main main main main main main main main main main main main main main main main main main

SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE

回复讨论(解决方案)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>#main {    margin-right:220px;}#side {    position:absolute;    width:200px;	right:0;	top:0;}.container {	position:relative;}</style></head><body><div class="container">    <div id="main">    main main main main main main main main main main main main main main main main main main main main main main main main     </div>     <div id="side">SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE  SIDE SIDE SIDE SIDE SIDE SIDE SIDE</div>    </div></body></html>

登录后复制

谢谢，这样是可以的。
还是想问一下为什么float:right无法达到这个效果。有什么需要注意的地方？

把side放在main前面，css保持不变，结果就显示正确。
不明白原因。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>#main {    margin-right:220px;}#side {    float:right;    width:200px;}</style></head><body><div class="container">     <div id="side">SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE IDE SIDE SIDE SIDE SIDE SIDE  SIDE SIDE SIDE SIDE SIDE SIDE SIDE</div>    <div id="main">    main main main main main main main main main main main main main main main main main main main main main main main main     </div>     </div></body></html>

登录后复制

应该是文本流的问题, 先后读的div有不同布局

无论怎样，代码解析总归是自上而下的

当遇到块属性元素的时候，由于块属性元素本身独占一排，无论怎样的情况下。

那么就要讲下，什么是浮动？

可以这么定义，浮动可以使元素脱离文档流，按照指定的方向移动，直到相邻浮动元素或者父级边界停了下来

1.块元素放在上边，浮动放在下边由于自上而下解析，遇到块元素独占一排，和父级同宽，接下来遇到浮动元素，那么应该在块元素下边发生位移，直到右边父级边界
2.块元素放下边，浮动放上边先遇到浮动，那么脱离文档流，发生位移直至右边父级边界，那么接下来的div为块，如果你不清除浮动，肯定要挤上来的，因此会在一排显示

我不止一次的在强调，在做页面布局时，一定注意，怎么才能规范的去布局，怎么才是正常一种思路，而不是说我试了这个布局，加了某条样式，达到了我想要的结果，然后会引发其他的问题

如果想要让两个块元素在同行内显示，请都加上浮动

也许很多人会做如下处理，左边的块浮动，右边的div不设置浮动，靠后边元素挤上来实现类似的效果，很多人可能考虑写这样的代码

<style>.left{width:100px;height:100px;background:red;float:left;}.right{width:100px;height:100px;background:green;margin-left:100px;}</style></head><body>    <div class="left"></div>    <div class="right"></div></body>

登录后复制

标准浏览器下，不会有什么问题，然而在IE6下两个块元素之间会有3px的间隙bug，而此问题是没法修复的，除非统一浮动

虽然你的代码和上面的有一定的区别，但是我还是习惯归为一类，而此类问题的解决就是统一浮动

这个……还是用js控制比较好。