Css 中央一号<;部门>;然后向右浮动
可能重复:Css 中央一号<;部门>;然后向右浮动,css,html,floating,Css,Html,Floating,可能重复: 我试图将container1居中,将container2向右浮动,使其稍微脱离页面: 例如: 不幸的是,container2在container1的下方和右侧跳转,正如您在站点模型中看到的(链接右下方) 现场模型: CSS: 将两个div包装在另一个div.中,并将容器1和容器2显示为内联块 像这样的 <div style="width: 2000px"> <div id="container1" style="width: 990px; display:
我试图将container1居中,将container2向右浮动,使其稍微脱离页面: 例如: 不幸的是,container2在container1的下方和右侧跳转,正如您在站点模型中看到的(链接右下方) 现场模型: CSS:
将两个div包装在另一个div.中,并将容器1和容器2显示为内联块 像这样的
<div style="width: 2000px">
<div id="container1" style="width: 990px; display: inline-block">
</div>
<div id="container2" style="width: 990px; display: inline-block">
</div>
</div>
尝试此操作尝试使用绝对定位而不是浮动 比如:
#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%;
}
这是一个
编辑:如果您不想对container1进行绝对定位,只需添加
top:0
到container2首先,您需要将#container2
移动到标记中的#container1
上方,以便浮顶将位于#container1
的顶部,而不是之后。其次,您需要给#container2
一个负边距,以便将其移出屏幕
#container2 {
background-color: #CC9900;
max-width: 600px;
width: 80%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
float: right;
display: inline-block;
margin-right: -300px;
}
如果你想得到准确的答案,就把它摆弄一下。这只是把container1一路抛到左边,container1仍然把自己放在靠近底部的一个奇怪的地方(但奇怪的是不是放在container1下面)。这个“将container2向右浮动,使它稍微离开页面”是怎么回事,与
float
bologne相比,我喜欢内联块
,但如果必须支持IE8或更低版本,问题就会出现。它们不支持内联块
,唉,是的!!我通常在最新的浏览器中尝试一切。这可能就是问题所在。这很有效!非常感谢。我以你的方式拥抱你。
#container2 {
background-color: #CC9900;
max-width: 600px;
width: 80%;
height: 100%;
padding-top: 60px;
padding-bottom: 50px;
text-align: center;
float: right;
display: inline-block;
margin-right: -300px;
}