有2列，希望右方固定宽度，左侧自动宽度-HTML教程-爱易网页

有2列，希望右方固定宽度，左侧自动宽度

日期：2014-05-16　浏览次数：20620 次

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

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

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

<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>
------解决方案--------------------

<!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>

------解决方案--------------------
应该是文本流的问题, 先后读的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"><

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

有2列，希望右方固定宽度，左侧自动宽度

相关资料更多>

推荐阅读更多>