相关疑难解决方法(0)

2列div布局:右列有固定宽度,左侧流体

我的要求很简单: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)

请指教.非常感谢!

html css

155
推荐指数
5
解决办法
19万
查看次数

CSS块格式化上下文如何工作?

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)

css

78
推荐指数
1
解决办法
2万
查看次数

半流体布局CSS/Html

我有一个两列布局,其中我有一个350px右列的静态宽度,而左列的宽度应该是它填充页面的其余部分.或者至少这是我想要发生的事情,但遗憾的是事实并非如此.

这是我的css/html:http://jsfiddle.net/CmJ7P/.任何有关如何实现这一目标的帮助都将非常感激.

编辑:如果可以,我更喜欢IE6中的解决方案

html css fluid-layout

2
推荐指数
1
解决办法
896
查看次数

标签 统计

css ×3

html ×2

fluid-layout ×1