我的要求很简单:2列,右列有固定大小.不幸的是,我无法在stackoverflow和Google上找到有效的解决方案.如果我在自己的上下文中实现,那么每个解决方案都会失败 目前的解决方案是:
div.container {
position: fixed;
float: left;
top: 100px;
width: 100%;
clear: both;
}
#content {
margin-right: 265px;
}
#right {
float: right;
width: 225px;
margin-left: -225px;
}
#right, #content {
height: 1%; /* fixed for IE, although doesn't seem to work */
padding: 20px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="container">
<div id="content">
fooburg content
</div>
<div id="right">
test right
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我用上面的代码得到以下内容:
|----------------------- -------|
| fooburg content | |
|-------------------------------|
| | test right |
|----------------------- -------|
Run Code Online (Sandbox Code Playgroud)
请指教.非常感谢!
我有一个类似于CSS Auto Margin按下其他元素的问题:右浮动侧边栏被推到主非浮动内容div下面.建议的答案是:只需反转标记的顺序,并在非浮点div 之前写出浮点div.
例如,这个:
<div class="container">
<div id="non-floating-content">
fooburg content
</div>
<div id="float-right">
test right
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
需要笨拙地重新订购:
<div class="container">
<div id="float-right">
test right
</div>
<div id="non-floating-content">
fooburg content
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
那么,为什么这也可以在没有重新排序的情况下工作:使用基于网格的设计的最大宽度和最小宽度的弹性布局?查看现场演示.标记的顺序仍然合理:float div 在非浮点div 之后写出.然而浮动不会被推到页面上.
我问,因为我不想破解主题PHP(重新排序div)以便正确地设计它.
其他也说解决方案的帖子是"重新订购你的div":