2列布局(左列固定宽度,右流体+透明:两者)

Question

2列布局(左列固定宽度,右流体+透明:两者)

只是需要帮助,因为我一直在努力解决这个问题.我需要的:

我有一个2列布局,其中左列的固定宽度为220px,右列的流体宽度为.

代码是:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>Fluid</title>
    <style type="text/css" media="screen">
        html, body { background: #ccc; }
        .wrap      { margin: 20px; padding: 20px; background: #fff; }
        .main      { margin-left: 220px; width: auto }
        .sidebar   { width: 200px; float: left; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="sidebar">This is the static sidebar</div>
        <div class="main">This is the main, and fluid div</div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

完全没问题.当我使用css语法清除时:在右列中,所有内容都在左列下移动.这是一种正确的行为,没有任何反对意见.

但我仍然需要使用clear:两种方式,它只保留在右列的上下文中(根本不受左列影响,并且不会在下面移动)

是否有任何简单的方法可以保留页面设计的基本浮动概念？

更新:请参阅此链接以了解我的内容,因为它可能与我的描述有点混淆.链接:http://jsfiddle.net/k4L5K/1/

Answer 1

Kar*_*oll 25

这是你改变的CSS:

html, body {
    background: #ccc;
}

.wrap {
    margin: 20px;
    padding: 20px;
    padding-right:240px;
    background: #fff;
    overflow:hidden;
}

.main {
    margin: 0 -220px 0 auto;
    width: 100%;
    float:right;
}

.sidebar {
    width: 200px;
    float: left;
    height: 200px;
}

.main, .sidebar {
    background: #eee; min-height: 100px;
}

.clear { clear:both; }
span { background: yellow }

Run Code Online (Sandbox Code Playgroud)

基本上我所做的就是改变布局的方式,这样.maindiv就会浮动在右边.要做到这一点,我们必须添加两件事:

在.wrapdiv 上填充240px ,和
.maindiv的右边距为-220px,以正确对齐页面的流体部分.

因为我们已将.maindiv放在右侧,所以clear: both;现在只会影响.maindiv中的内容,如您所愿.

你可以在这里看一个演示:http://jsfiddle.net/6d2qF/1/

归档时间：	14 年，4 月前
查看次数：	15858 次
最近记录：	8 年，7 月前