0

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

我的目标是使列如图所示，它们一起具有 100% 的体宽。

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

我怎样才能做到这一点？

4

3 回答 3

0

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

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

干杯!

于 2012-07-07T17:30:32.980 回答
0

速记

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

解决此问题的方法是使用多个图像，并告诉它们在页面的不同部分重复或不重复。但是，在我直接回答您的问题后，我会讨论这个问题。


简答

要获得 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，就像您已经拥有的那样，它包含内容等。在包装器内你有：

  • A header（标志和导航栏），没有背景（所以你可以看到body背景）。

  • 一个featured部分在中间拥有那个非常大的图像。您可以使用负边距使其居中。

  • 中间那些图像的subnav部分。这将有它自己的背景图像，该图像具有背景的匹配部分，body因此它看起来像图像一样流入。

  • content包含页面所有内容的部分。这将使图像垂直重复以看起来连续。

    #content {
  background-image: url('path/to/slice.jpg') repeat-y;
}

  • 具有subfooter页面弯曲部分的部分（底部的灰色到橙色曲线）。

  • 最后是一个footer包含所有内容的部分。

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


总结一下

你永远不需要100%为你的 wrapping 设置一个宽度div。（我这样说是为了概括，有些风格使用了这个，但它们不是同一种设计）。

您应该始终首先尝试为创建所需外观的body、header、content和footer部分创建图像。

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

祝您设计愉快，祝您好运！

于 2012-07-07T17:47:01.033 回答
0

谢谢大家的回答和想法。他们很有帮助，我确实学到了一些新东西（我最大的“谢谢”去@Jon 写了一个非常棒的帖子）。但是，由于我既不能用百分比也不能用背景来解决这个问题（因为我的设计比提供的要复杂一些），所以我用 jQuery 来解决这个问题。总而言之，这是我的模型小提琴。

注意：有时您需要将 left 更改125为126，以确保两端相遇。

于 2012-07-07T19:05:22.833 回答