具有不同大小列和响应式的居中网站布局？答案

【问题标题】：Centered website layout with varying sized columns and responsive?具有不同大小列和响应式的居中网站布局？
【发布时间】：2014-12-15 23:32:01
【问题描述】：

我希望创建一个像 Joules.com 这样的网站（或至少是一个主页）

我本质上想并排创建不同大小的框，但希望它们调整大小或移动到新行，同时浏览器窗口调整大小（响应式？）。他们也有必要居中。我可以达到我将 div 并排放置但它们似乎没有居中的地步......这就是我到目前为止所拥有的。任何帮助将不胜感激。我在这个部门有点小白，但想学习！

CSS

#container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
#Womens {
    height: auto
    width: 241px;
    float: left;
    margin: 0 auto;
    text-align:center;
}
#Mens {
    height: auto
    margin: 0 auto;
    width: 241px;
    float: left;
    text-align:center;
}
#Footwear {
    height: auto
    margin: 0 auto;
    width: 241px;
    float: left;
    text-align:center;
}
#Accessories {
    height: auto
    margin: 0 auto;
    width: 241px;
    float: left;
    text-align:center;
}

HTML

<body><center>
<div id="container">
  <div id="Womens">Womens</div>
  <div id="Mens">Mens</div>
  <div id="Footwear">Footwear</div>
  <div id="Accessories">Accessories</div>
</div>

【问题讨论】：

标签： css web center centering

【解决方案1】：

首先，您不需要为每个元素使用 ID，因为您的 CSS 代码对于每个人来说都是相同的，而是使用类名：

<div id="container">
  <div class="column">Womens</div>
  <div class="column">Mens</div>
  <div class="column">Footwear</div>
  <div class="column">Accessories</div>
</div>

那么不要使用float，因为你不能将这些元素居中，使用inline-block：

#container {
  font-size:0;
  text-align:Center;
}
.column {
  font-size:14px;
  display:inline-block;
}

查看Demo Fiddle

【讨论】：

我对这个解决方案的问题是它在桌面上运行良好，但是当我在我的 iphone 5 上预览它时，div 仅分隔为每行 2 个而不是每行 1 个。所以我无法看到其中两个部门，因为它们不在屏幕上。
这可以按您的要求工作......中心列并随着宽度的变化而中断......所以这个回答问题请限制您的问题一次只有一个问题。现在要满足您的所有要求，您将需要使用媒体查询。
“或通过调整浏览器窗口大小移动到新行”也是我最初问题的一部分。为混乱道歉。我需要的是每个 div 在达到移动宽度时都在新行上落下...
@Jamescwrk 这个例子怎么不能这样工作？ .. 如果窗口的宽度超过 320 像素，这永远不会抵消窗口的宽度，这对于移动设备来说价值较小，而不是换行。同样，如果您需要更准确的行为，请使用媒体查询
它不会将每个框都放在一个新行上。在移动分辨率下，它会显示两个相邻的框，使其中一个被截断。如果我知道怎么做，我会很乐意使用媒体查询。

【解决方案2】：

通过使用类 (Don't Repeat Yourself ;))，您的 CSS 可能会更简单。

如果您将text-align: center; 放在容器上，而不是容器本身及其子内容将居中。如果您愿意，您可以覆盖单独列的设置，或者仅覆盖它们的内容。

您还为列宽使用了固定像素值，因此它们不能真正“响应”。您也可以在那里使用百分比值，但这可能会产生一些棘手的副作用。请注意，即使有 auto 边距的 4 列仍然需要小于 100%，否则它们会奇怪地换行。它们也可能以较小的尺寸折叠或重叠。您可以在容器或列上设置最小宽度以帮助防止这种情况，以及margin-bottom 以在它们发生包装时将它们分开。

另外，如果你只使用百分比宽度和内联块，列将在底部对齐。使用vertical-align: top; 可以解决这个问题。您最初说过您想要不同的高度，但如果您不这样做，您可以设置最小或最大高度并在内容上放置类似overflow:scroll 的内容。

#container {
    width: 100%;
    min-width: 320px;
    margin: 0 auto;
    overflow: hidden;
    text-align:center;
}
.box {
    margin: 0 auto;
    margin-bottom: 10px;
    width: 20%;
    min-width: 90px;
    padding: 1%;
    vertical-align: top;
    display: inline-block;
    background-color: #678;
    color: #fff;
}
.content {
    background-color: #fff;
    color: #333;
    padding: 1em;
    text-align: left;
}

<body>
    <div id="container">
      <div id="Womens" class="box">Womens
         <div class="content">This is some left-aligned women's content about/for women. View the Code Snippet in fullscreen!</div>
      </div>
      <div id="Mens" class="box">Mens
         <div class="content">This is some left-aligned men's content about/for men. If you resize the browser the columns will be responsive, but break after a certain point.</div>
      </div>
      <div id="Footwear" class="box">Footwear
         <div class="content">This is some left-aligned footwear content about/for feet. Feet are weird.</div>
      </div>
      <div id="Accessories" class="box">Accessories
         <div class="content">This is some left-aligned accessory content about stuff you men or women could potentially put on their feet, or whatever.</div>
      </div>
    </div>
 </body>

【讨论】：

我认为它们在调整大小后变得太小了！几乎无法阅读。我想让他们保持自己的大小，但在较小的显示器（手机和平板电脑）上将自己置于彼此下方。我可能没有尽我所能解释这一点。
@Jamescwrk 正如我上面所说，您可以保持固定像素宽度，或设置最小宽度属性。在电话集列min-width:300px;左右的纵向模式下。它们仍然会在更大的屏幕尺寸下扩展一点。试验一下，看看有什么用。这只是一个可以玩的例子。另外，不客气。
我得试试这个。非常感谢您的帮助，谢谢。