中心一< div>并浮动其他权利 [英] Center one <div> and float other right
问题描述
可能重复:
居中一个div,而另一个div悬浮在右侧?
我试图将container1和float container2中心向右移动,以使它从页面略微流出:
I'm trying to center container1 and float container2 to its right so that it's flowing off of the page slightly:
示例: http://i.imgur.com/JHkfn.jpg
不幸的是,container2正在下面和container1的右边跳跃,你可以看到在网站模型(链接下面。)
Unfortunately, container2 is hopping below and to the right of container1, as you can see in the site mock-up (link right below.)
网站停用:
http://ad313.samrandolphdesign.com/
CSS:
#container1 {
margin: auto;
background-color: #FFF;
width: 80%;
height: 100%;
max-width: 600px;
padding-bottom: 15px;
display: block;
}
#container2 {
background-color: #CC9900;
max-width: 600px;
width: 80%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
float: right;
display: block;
}
推荐答案
尝试使用绝对定位浮动。
Try using absolute positioning instead of floating.
如下:
#container1 {
margin: auto;
background-color: red;
width: 50%;
height: 100%;
max-width: 600px;
padding-bottom: 15px;
text-align: center;
display: block;
position: absolute;
left: 25%;
}
#container2 {
background-color: #CC9900;
max-width: 600px;
width: 50%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
display: block;
position: absolute;
right: -25%;
}
这是一个 jsfiddle
编辑:如果你不想绝对定位container1,只需添加 top:0;
to container2
Here is a jsfiddle
If you don't want absolute positioning for container1, just add top: 0;
to container2
这篇关于中心一< div>并浮动其他权利的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!