2列布局（左列固定宽度，右列流体+清除：两者）

发布于 2024-11-25 18:21:38 字数 1296 浏览 1 评论 0原文

只是需要帮助，因为我多年来一直在尝试解决这个问题。我需要什么：

我有一个 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>

完全没有问题。当我在右列中使用 css 语法 clear: Both 时，之后的所有内容都会移到左列下。这是正确的行为，没有什么可反对的。

但我真的需要使用clear：无论是哪种方式，它都停留在右列的上下文中（根本不受左列的影响，并且不会在下面移动）

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

更新：请参阅此链接以了解我的内容，因为我的描述可能有点令人困惑。链接：http://jsfiddle.net/k4L5K/1/

原文

Just need help as I have been trying sort this out for ages now. What I need:

I've got a 2 column layout, where the left column has a fixed width 220px and the right column has a fluid width.

Code is:

    <!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>

There's no problem at all. When I use a css syntax clear: both in the right column, all content after gets moved under the left column. This is a right behaviour and nothing against it.

But I relly need to use clear: both in the way, that it stays just in context of the right column (doesn't get affected by the left column at all, and doesn't move underneath)

Is there any simple get around with retaining a basic float concept of page design?

UPDATE: Please see this link to know what I'm on about as it may be a bit confusing from my description.
Link: http://jsfiddle.net/k4L5K/1/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不忘初心 2024-12-02 18:21:38

这是更改后的 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 }

基本上，我所做的就是更改布局的完成方式，以便 .main div 浮动在右侧。为此，我们必须添加两件事：

在 .wrap div 上添加 240px 的内边距，
在 .main div 上添加 -220px 的右边距以正确对齐页面的流动部分。

因为我们已将 .main div 浮动到右侧，所以 clear: Both; 现在仅影响 .main div 内的内容，如下所示你想要的。

您可以在此处查看演示：http://jsfiddle.net/6d2qF/1/

Here's your altered 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 }

Basically what I've done is change the way your layout is done, so that .main div is floated on the right. To do this, we had to add 2 things:

A padding of 240px on the .wrap div, and
A right margin on the .main div of -220px to properly align the fluid part of the page.

Because we've floated the .main div on the right, the clear: both; now only affects content inside the .main div, as you want.

You can see a demonstration here: http://jsfiddle.net/6d2qF/1/

回复收藏 0 原文

深爱成瘾 2024-12-02 18:21:38

这个问题很老了，但这是我最近发现的另一个解决方案。

我们只需要做两件事：

将 overflow: auto; 添加到 .main div
确保包装器通过添加 overflow: hide; 保留文档流> 到 .wrap div，或添加 .clear div 作为 .wrap 元素的最后一个子元素

这是更新的小提琴： http://jsfiddle.net/k4L5K/89/

回复收藏 0 原文

烟─花易冷 2024-12-02 18:21:38

试试这个：

<!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; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; float: left; }
        .clear {clear:both;}
    </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 class="clear"></div>
    </div>
</body>
</html>

Try this:

<!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; }
        .main,
        .sidebar   { background: #eee; min-height: 100px; float: left; }
        .clear {clear:both;}
    </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 class="clear"></div>
    </div>
</body>
</html>

回复收藏 0 原文

~没有更多了~