Question

他们说，单张图片可以解释超过一千个单词，所以这里是我的“更多”：http://www.imagebanana.com/view/hcqsz5fs/cols.png

我的目标是让图像上显示的列具有100％的体宽。

我的小提琴就在这里：http://jsfiddle.net/c2JH3/（请注意，这只是我目前工作的一个模型）。

我怎样才能做到这一点？

Answer 1

我不知道如何使用小提琴。但这对我来说很好。我只是使用背景颜色和边框来正确显示差异

<!doctype html>
<html>
<head>
    <title>xxx</title>
    <style>
        body{
            margin: 0;
        }
        #wrap {
            width: 100%;
        }
        #left {
            width: 600px;
            float: right;
            border: 1px solid #000000;
        }
        #right {
            width: 350px;
            border: 1px solid #000000;
        }
        #container_left {
            width: 55%;
            float: left;
            background: red;
        }
        #container_right {
            width: 45%;
            float: right;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="wrap">
    <div id="container_left">
        <div id="left">
            <p>Content</p>
        </div>
    </div>
    <div id="container_right">
        <aside id="right">
            <p>Sidebar</p>
        </aside>
    </div>
</div>
</body>

干杯！

Answer 2

快速注释

在你的评论中，你说你不能使用背景图像，因为高度是可变的。

解决此问题的方法是使用多个图像，并告诉他们重复或不重复页面的不同部分。但在我直接回答你的问题之后，我会仔细研究这个问题。

简答

要获得100％的正文宽度，您需要对%规则使用百分比（width）。像这样：

#left {
  width: 60%;
}

#right {
  width: 40%;
}

解决一些问题

当您的内容通过屏幕底部时，您必然会遇到一个问题。在这种情况下，您需要告诉divs并排。

这应该可以解决问题：

#left {
  position: absolute;
    top: 0;
    left: 0;
  width: 60%;
}

#right {
  position: absolute;
    top: 0;
    right: 0;
  width: 40%;
}

返回注释

相信我，你不想在你的宽度上使用百分比。它使得调整大小和扩展非常难以设计，如果没有完全重新设计css，未来尝试进行的更改可能无法正常工作。

就像我之前说过的那样，你想要使用多个图像。您将在body标记上显示背景图片 - 按照您提供的设计进行操作 - 其中的灰色到橙色淡入淡出。 css看起来像这样：

body {
  background-image: url('path/to/header.jpg') no-repeat;
}

然后你会有一个像你已经拥有的包装器div，它包含内容等。在包装内你有：

header（徽标和导航栏），没有背景（因此您可以看到body背景）。
一个featured部分，中间有一个非常大的图像。您可以使用负边距使其居中。
中间那些图片的subnav部分。这将拥有自己的背景图像，该图像具有body背景的匹配部分，因此它看起来像图像一样流入。
包含网页所有内容的content部分。这将有一个垂直重复的图像看起来是连续的。
```
#content {
  background-image: url('path/to/slice.jpg') repeat-y;
}
```
subfooter部分，其中包含页面的弯曲部分（底部为灰色到橙色曲线）。
最后是一个footer部分，其中包含所有内容。

您可以在内页上使用相同的结构，只需使用不同的图像和间距来更改页面的外观。

总结

你绝不会，永远需要100%宽度来包裹div。（我说这是概括的，有一些使用它的样式，但它们不是同一种设计）。

您应始终尝试首先执行的操作是为创建的body，header，content和footer部分创建图片你想要的样子。

然后让wrap设置为像素的设置宽度，它将保留在页面的中心，而边距会增加并显示更多的背景图像。

玩得开心，祝你好运！

Answer 3

谢谢大家的回答和想法。他们很有帮助，我确实学到了一些新东西（我最大的'谢谢你'去了@Jon一个非常好的，很棒的帖子）。但是，由于我无法用百分比和背景来解决这个问题（因为我的设计比提供的设计稍微复杂一点），所以我使用jQuery。总而言之，这是我的mockup fiddle。

注意：有时您需要将左125更改为126，以确保两端都满足。

我怎样才能有两个组合宽度为100％的列？

3 个答案:

快速注释

简答

解决一些问题

返回注释

总结