以下是我的例子:
<div id="mainContainer">
<div id="itemIWantToCenter"></div>
<div id="itemIwantFloatedRight"></div>
</div>
mainContainerwidth
宽度设置为100%。 itemIwantFloatedRight
宽度设置为300px。假设itemIWantToCenter
的宽度为200px。如何在容器中漂浮另一个div时将该div居中?谢谢!
答案 0 :(得分:1)
这是我的解决方案的fiddle,代码如下(固定链接)
此解决方案的优点是,当父容器的大小发生变化时,内容容器将扩展,同时保留其边距,右侧边栏将始终保持在右侧。
希望这有帮助。
注意在小提琴中,content
容器有点渺茫。这是由于窗户的大小。更改窗口的大小{将鼠标悬停在分隔线上,单击并拖动},以查看优势。
<div class="container">
<div class="content">
centered content
</div>
<div class="right">
right
<div>
</div>
.container {
width:100%;
position:relative;
}
.container .content {
width:auto;
margin:0 200px;
background:green;
}
.container .right {
width:200px;
position:absolute;
top:0px;
right:0px;
background:#f00;
}
.content, .right {
height:300px
}
答案 1 :(得分:1)
希望这会有所帮助:
<div id="mainContainer">
<div id="itemIWantToCenter" style="float: right;"></div>
<div id="itemIwantFloatedRight" style="margin-left: 50%;"></div>
</div>
答案 2 :(得分:0)
你应该使用一个链接的样式表...
<div id="mainContainer" style="width:100%; border:solid 1px red;">
<div id="itemIwantFloatedRight" style="width:300px; border:solid 1px green; float:right">
right
</div>
<div id="itemIWantToCenter" style="width:200px; border:solid 1px blue; margin:0 auto;">
center
</div>
</div>