居中的网站布局与不同大小的列和响应？

我期待创建一个像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>

来源

2014-10-20 Jamescwrk

首先，在你不需要使用一个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

来源

2014-10-20 21:11:06 DaniP

我有这个解决方案的问题是，它在桌面上伟大的，但是当我预览我的iPhone 5的div只分离到2每行，而不是1元的行。所以我无法看到两个分部，因为他们在屏幕外。 – Jamescwrk 2014-10-21 08:11:33

这个工程，你问...中心列和打破宽度的变化....所以这个答案的问题，请限制你的问题只有一个问题在时间。现在为了满足您的所有需求，您将需要使用媒体查询。 – DaniP 2014-10-21 12:17:41

“或移动到浏览器窗口调整大小的新行”也是我原来的问题的一部分。抱歉的混淆。我需要的是每个div在达到移动宽度时着陆在新线路上...... – Jamescwrk 2014-10-21 13:21:59

你的CSS可能会简单得多，通过使用一个类（Don't Repeat Yourself;））。

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

您也使用了列宽的固定像素值，所以它们不能真正“响应”。你也可以在那里使用百分比值，但是可能会有一些棘手的副作用。请注意，4列甚至auto页边距仍然需要为< 100％，否则它们会很奇怪。它们也可能在较小尺寸下坍塌或重叠。您可以在容器或列上设置一个最小宽度以帮助防止这种情况发生，如果它们包装，则可以使用它们将其分开以保持它们不分开。

另外，如果您只使用百分比宽度和内嵌块，则列将在底部对齐。使用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>

来源

2014-10-20 22:01:14 mc01

我认为他们在调整大小时太小了！几乎不可读。我希望他们能够保持它们的尺寸，但在较小的显示器（电话和平板电脑）上，它们本身就位于彼此之下。我可能不会尽我所能解释这一点。 – Jamescwrk 2014-10-21 11:25:09

@Jamescwrk正如我上面所说的，你可以保持固定的像素宽度，或设置最小宽度属性。在纵向模式下，在电话机列“min-width：300px;”左右。他们仍会在更大的屏幕尺寸上扩大一点。尝试一下，看看有什么作用。这只是一个玩的例子。另外，不客气。 – mc01 2014-10-21 15:27:42

我必须以某种方式尝试。我非常感谢你的帮助，谢谢。 – Jamescwrk 2014-10-21 18:31:11

居中的网站布局与不同大小的列和响应？

回答

相关问题