Question

我正在尝试制作一个网页，其中有多个Div（.collectionbox）框彼此相同并且彼此相邻“浮动”，直到它们到达窗口的一侧然后开始新的一行。因此，如果我要创建一个PHP循环，它将仍然看起来居中，并且mroe divs 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）居中并且仍然显示在彼此旁边的行中，您可以使用显示：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

CSS Div Box根据浏览器窗口大小居中排列

1 个答案: