html - 居中并根据浏览器窗口大小排列的 CSS Div 框

Question

我正在尝试制作一个网页，其中包含多个彼此相同的 Div(.collectionbox)框，并且尽可能“ float ”彼此相邻，直到它们到达窗口的一侧开始新的一行。因此，如果我要创建一个 PHP 循环，它看起来仍然居中，并且 mroe div 越长，bage 就会变得越长。

在每个 div (.collectionbox) 中是另一个 div (.addtobasket) 框，它需要位于 div (.collectionbox) 的底部。

所有这些都位于一个主 div (#mainbody) 中

我设法让所有我想要的东西单独工作，但是让它们一起工作让我很头疼。

目前我下面的代码将根据需要将页面居中，现在我只希望 .collectionbox div 具有与 float: left 相同的效果。无论内容如何，​​.addtobasket div 都将位于 .collectionbox 的底部而不会实际位于左侧。

我的 CSS:

<style type="text/css">
#mainbody {
width: 100%;
margin-left: auto;
margin-right: auto;
height: auto;
text-align: center;
}

.collectionbox {
height: 295px;
width: 295px;
background-image: url(collectionbox.png);
background-repeat: no-repeat;
margin-right: auto;
margin-left: auto;
text-align: left;
position: relative;
float: none;
}

.addtobasket {
width: 266px;
text-align: center;
height: 57px;
position: relative;
left: 16px;
top: 50px;
}
</style>

我的 HTML:

<div id="mainbody">

<div class="collectionbox">
<div class=".collectionboxtitle"><img src="title-verybritish.png" width="295" height="49" /></div>
<div class="addtobasket"><img src="price-4-99.png" width="174" height="57" border="0"/></div>
<p>Test</p>
</div> 

<div class="collectionbox">
<div class=".collectionboxtitle"><img src="title-verybritish.png" width="295" height="49" /></div>
<div class="addtobasket"><img src="price-4-99.png" width="174" height="57" border="0"/></div>
<p>Test </p>
</div> 

<div class="collectionbox">
<div class=".collectionboxtitle"><img src="title-verybritish.png" width="295" height="49" /></div>
<div class="addtobasket"><img src="price-4-99.png" width="174" height="57" border="0"/></div>
<p>Test</p>
</div> 

<div class="collectionbox">
<div class=".collectionboxtitle"><img src="title-verybritish.png" width="295" height="49" /></div>
<div class="addtobasket"><img src="price-4-99.png" width="174" height="57" border="0"/></div>
<p>Test </p>
</div> 

</div>

提前感谢您的帮助!

保罗。

Answer 1

要使框 (collectionbox) 居中并仍然显示在一行中，您可以使用 display: inline-block 而不是 float: left 。

 .collectionbox {
    height: 295px;
    width: 295px;
    background-image: url(collectionbox.png);
    background-repeat: no-repeat;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
    position: relative;
    display:inline-block;
    vertical-align: top;
}

至于 addtobasket div，您应该绝对定位它，使其始终位于其父级的底部。

.addtobasket {
    width: 266px;
    text-align: center;
    height: 57px;
    position: absolute;
    left: 16px;
    bottom: 0px;
}

JsFiddle here