Question

我希望创建一个网站（或至少是一个主页），如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>

Answer 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

Answer 2

使用类（Don't Repeat Yourself;））可以更简单地使用CSS。

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

您还使用了固定像素值作为列宽，因此它们无法真正“响应”。您也可以在那里使用百分比值，但这可能会产生一些棘手的副作用。请注意，即使auto页边距为4列，仍需要＆lt; 100％或者他们奇怪地包裹。它们也可能以较小的尺寸折叠或重叠。您可以在容器或列上设置最小宽度以帮助防止这种情况，以及margin-bottom如果它们确实包装，则将它们分开。

此外，如果您只使用百分比宽度和内联块，则列将在底部对齐。使用vertical-align: top;修复了该问题。你说最初你想要不同的高度，但如果你没有，你可以设置一个最小或最大高度＆amp;在内容上添加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>

中心的网站布局，不同大小的列和响应？

2 个答案: