我的要求很简单: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块格式化上下文如何工作?
CSS2.1规范说,在块格式化上下文中,框从顶部开始垂直排列.即使路径中存在浮动元素,也会发生这种情况,除非块框建立了新的块格式化上下文.我们知道,当浏览器在块格式化上下文中渲染块框时,浮动元素被省略,为什么建立新的块格式化上下文有效?
盒子(块盒和内联盒)如何在正常流程中布局?
我在某处看到块元素生成块框,但当用户代理绘制框并在填写内容时将其考虑在内时,将忽略浮动元素.虽然浮动元素将与框的其他元素边界重叠,但解决方案是使用重叠元素为重叠元素建立新的块格式化上下文overflow:hidden.
"新的块格式化上下文仍然是块格式化",因此在绘制框时,它还会将浮动元素视为不退出.这是对的还是我误解了"新的块格式化上下文?"
通过说"这是对柱状样式布局有用的行为.然而,它的主要用途是停止浮动,例如在"主要内容"div中,实际上清除浮动的侧列,即在源代码中出现的浮动."
我不明白其中的含义,我会提供一个例子,也许你会理解我.
.content {
background: #eee;
color #000;
border: 3px solid #444;
width: 500px;
height: 200px;
}
.float {
background: rgba(0, 0, 255, 0.5);
border: 1px solid #00f;
width: 150px;
height: 150px;
float: right;
}
p {
background: #444;
color: #fff;
}Run Code Online (Sandbox Code Playgroud)
<div class="content">
<h3>This is a content box</h3>
<p>It contains a left floated box, you can see the actual content div does go under the float, but that it is …Run Code Online (Sandbox Code Playgroud)我有一个两列布局,其中我有一个350px右列的静态宽度,而左列的宽度应该是它填充页面的其余部分.或者至少这是我想要发生的事情,但遗憾的是事实并非如此.
这是我的css/html:http://jsfiddle.net/CmJ7P/.任何有关如何实现这一目标的帮助都将非常感激.
编辑:如果可以,我更喜欢IE6中的解决方案