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

我正在尝试制作一个网页，其中有多个Div（.collectionbox）框，它们彼此相同，并且尽可能多地“浮动”在一起，直到它们碰到窗口的一侧，然后开始一个新行。因此，如果我要创建一个PHP循环，它仍然看起来是以中心为中心的，并且mroe div越长，bage就会变得越长

在每个div（.collectionbox）中有另一个div（.addtobasket）框，它需要位于div（.collectionbox）的底部

所有这些都位于一个主分区（#主体）内

我设法让我想要的一切都单独工作，但让它们一起工作让我头疼

目前，我下面的代码将根据需要居中显示页面，现在我只希望.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>

#主体{
宽度：100%；
左边距：自动；
右边距：自动；
高度：自动；
文本对齐：居中；
}
.收集箱{
高度：295px；
宽度：295px；
背景图片：url（collectionbox.png）；
背景重复：无重复；
右边距：自动；
左边距：自动；
文本对齐：左对齐；
位置：相对位置；
浮动：无；
}
addtobasket先生{
宽度：266px；
文本对齐：居中；
高度：57px；
位置：相对位置；
左：16px；
顶部：50px；
}

我的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>

试验

试验

试验

试验

提前谢谢你的帮助

Paul.

要使方框（

collectionbox

）居中并仍然显示在相邻的一行中，您可以使用display:

内联块

而不是

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;
}

---

工作很愉快！非常感谢：）