我希望创建一个评级网站,但目前我正努力让它们看起来像这样:Desired Result
目前我遇到了这个问题:
这是我的html / php:
<div id="center">
<?php
for ($i = 0; $i<3; $i++) {
?><div class="floating-box">No Content</div>
<div class="floating-boxsmall">No Content</div>
<?php
}
?>
这是我的相关CSS:
#center {
position: fixed;
top: 50%;
left: 30%;
margin-top: -100px;
margin-left: -150px;
}
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #0076be;
}
.floating-boxsmall {
float: left;
width: 150px;
height: 15px;
margin: 10px;
border: 3px solid #0076be;
}
非常感谢任何帮助
答案 0 :(得分:0)
我会继续将你的物品包装在一个像这样的容器中:
<?php for ($i = 0; $i<3; $i++) { ?>
<div class="floating-item">
<div class="floating-box">No Content</div>
<div class="floating-boxsmall">No Content</div>
</div>
<?php } ?>
从box
和boxsmall
移除浮动内容,然后将其添加到floating-item
。
#center {
position: fixed;
top: 50%;
left: 30%;
margin-top: -100px;
margin-left: -150px;
}
.floating-item {
float: left;
}
.floating-box {
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #0076be;
}
.floating-boxsmall {
width: 150px;
height: 15px;
margin: 10px;
border: 3px solid #0076be;
}
为了免除未来的麻烦,请不要忘记清除物品:
答案 1 :(得分:0)
用父容器包装.floating-box
和.floating-boxsmall
:
.parent{
width: 150px;
margin:10px;
float:left;
}
然后在您的子容器中,删除浮动并最终删除左/右边距,因为您要在父容器中分配它们:
.floating-boxsmall{
float:left;
margin: 10px 0;
}
.floating-box{
float:none;
margin:0px;
}
在您的PHP中:
<?php
for ($i = 0; $i<3; $i++) {?>
<div class="parent">
<div class="floating-box">No Content</div>
<div class="floating-boxsmall">No Content</div>
</div>
<?php
}
?>
没有测试过这个,但它应该可行。你肯定需要一个父容器。玩它。
答案 2 :(得分:0)
#center{
margin:0px auto;
}
.floating-box, .floating-boxsmall{
display:block;
float:left;
margin:10px 5px;
background-color:#ccc;
text-align:center;
padding:20px;
}
.floating-box{
min-height:100px;
}
&#13;
<div id="center">
<div class="floating-box">No Content</div>
<div class="floating-boxsmall">No Content</div>
<div class="floating-box">No Content</div>
<div class="floating-boxsmall">No Content</div>
<div class="floating-box">No Content</div>
<div class="floating-boxsmall">No Content</div>
</div>
&#13;
以下是fiddle