相关疑难解决方法(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万
查看次数

为什么float div和non-float div的顺序仅在某些情况下有效?

我有一个类似于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":

html css fluid-layout

6
推荐指数
1
解决办法
935
查看次数

标签 统计

css ×2

html ×2

fluid-layout ×1