html - 我怎样才能有两列的组合宽度为 100% ？

Question

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

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

我的 fiddle 在这里:http://jsfiddle.net/c2JH3/ (请注意，这只是我当前工作的模型)。

我怎样才能做到这一点？

Answer 1

快速说明

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

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

简答

要获得 100% 的正文宽度，您需要为 width 规则使用百分比 (%)。像这样:

#left {
  width: 60%;
}

#right {
  width: 40%;
}

解决一些问题

当您的内容超出屏幕底部时，您一定会遇到一个问题。在这种情况下，您需要告诉 div 并排放置。

这应该可以解决问题:

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

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

回到笔记

相信我，您不想在宽度上使用百分比。这使得调整大小和缩放比例变得非常难以设计得很好，而且如果不完全重新设计您的 CSS，您将来尝试进行的更改可能不会奏效。

就像我之前说的，您想使用多张图片。您将在 body 标签上拥有背景图像，根据您提供的设计，它具有 gray-to-orange 淡入淡出。 CSS 看起来像这样:

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

然后，您将拥有一个包装器 div，就像您已经拥有的一样，它包含内容等。在包装内，你有:

• header( Logo 和导航栏)，没有背景(因此您可以看到 body 背景)。

  <

• featured 部分，中间有一张非常大的图片。您可以使用负边距使其居中。

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

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

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

• subfooter 部分具有页面的 flex 部分(底部的 gray-to-orange 曲线)。

  <

• 最后是一个 footer 部分，所有内容都在最底部。

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

总结

您永远永远需要100% 宽度来包装div。 (我这么说是为了概括，有某些样式使用它，但它们不是同一种设计)。

您应该始终尝试首先做的是为body、header、content、和 footer 部分创建您想要的外观。

然后将您的换行设置为以像素为单位的宽度，该宽度将保持在页面中央，同时页边距增加并显示更多背景图像。

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