如何固定两个div并排，一个在最左边，一个在右边固定的一个位置？

lovestefanie 2010-07-26 12:05:52

如题

...全文

2307 5 打赏收藏转发到动态举报

写回复

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

lovestefanie 2010-07-26

打赏
举报

回复

[Quote=引用 1 楼 aspwebchh 的回复:]
<div style="width:100px; height:100px">
<div style="width:40px; float:left; height:100px"></div>
<div style="width:40px; float:right; height:100px"></div>
</div>

如果非要在固定位置就用 position
[/Quote]
对了，左边那个宽度auto，右边固定，如何右边的离最左边500px可以么

挨踢直男 2010-07-26

打赏
举报

回复

<div style="width:100px; height:100px">
<div style="width:40px; float:left; height:100px"></div>
<div style="width:40px; float:right; height:100px"></div>
</div>

如果非要在固定位置就用 position

emily1900 2010-07-26

打赏
举报

回复

上面那贴是距离左边的那个DIV500PX。
楼主说的是最左边，我想了下，会不是你是想说第一个DIV起始的那个边界么。以下是距离最左边500PX
<body style="margin:0px; padding:0px">
<div style="height:100px">
<div style="width:100px; float:left; height:100px"></div>
<div style="width:40px; float:left; height:100px; margin-left:500px; position:absolute; left: 0px; top: 0px;"></div>
</div>
</body>

emily1900 2010-07-26

打赏
举报

回复

<div style="height:100px">
<div style="width:auto; float:left; height:100px"></div>
<div style="width:40px; float:left; height:100px; margin-left:500px"></div>
</div>

fipl 2010-07-26

打赏
举报

回复

设置好最外层div的宽度
两个内层div都float:left 第二个div 设置个margin-left 或者padding-left 注意不要超出最外层的宽度就行了

div的position属性详细讲解 1.流动模型（块元素，内联元素） 2.浮动模型（float:）块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。 3.层模型--绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。 div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } 效果如下：层模型--相对定位如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。如下代码实现相对于以前位置向下移动50px，向右移动100px; #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } 效果图：层模型--固定定位 fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。效果见代码：：： relative样式 #div1{ width:300px; height:200px; border:2px red italic; position:fixed; bottom:0; right:0; 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。 Relative与Absolute组合使用小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范： 1、参照定位的元素必须是相对定位元素的前辈元素：相对参照元素进行定位从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。 2、参照定位的元素必须加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 #box2{ position:absolute; top:20px; left:30px; } 这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

CSS 将button按钮垂直+水平居中参考文章：CSS实现垂直居中的5种方法具体效果如图：这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用 **margin:auto;**使块级元素垂直居中是很简单的。 .vert-center{ position:absolute; top:0; bottom:0; left: 0; margin: auto; right: 0;

demo包括： 1、多个div并排，宽度自适应100％ - 左右两侧div宽度固定，中间DIV占满剩余区域； 2、多个div，高度自适应100％ - 页面布局：头，身体，脚，占满整个屏幕；

两个div并排，右边的div需要铺满剩余空间？该如何定义CSSDIV1DIV2两个div并排，右边的div需要铺满剩余空间？该如何定义CSS回复讨论(解决方案)你试试看div2右浮动，然后给两个div设置固定宽度，div2 width: 85%;你试试看div2右浮动，然后给两个div设置固定宽度，右浮动？能给出具体的代码吗？div2 width: 85%;这个方法我用了，有没有更简便的方法？第一...

实现两个div，左边固定div宽度200px，右边div自适应 /*方法一： BFC(块级格式化上下文)*/ .container{ width:1000px;height:400px;border: 1px solid red; } .left{ width:200px;height:100%;background

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章