Question

这是我想要的一个例子

enter image description here

这些图像是从MySQL中的while循环加载的，并且希望它们之间的间距排序为左列和右侧接触每一侧而中间位于中心。如图：D

我拥有的CSS：

#realisation .box{
    float:left;
    width:286px;
    background:#fff;
    padding:10px;
    margin-right:20px;
    -moz-box-shadow: 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 2px 2px #ccc;
    box-shadow: 1px 2px 2px #ccc;
}

#realisation .box:last-child{
    margin-right:0px;
}

循环

<div class="box">
    <div><img src="imgs/beta/imgpasrap.jpg" width="286" height="176"/></div>
    <p>Text here</p>
  </div>

它对于前3个盒子来说效果很好，但更重要的是，显示器搞砸了。我怎么能像上面那张照片那样实现呢？

Answer 1

在包含所有这些图像的框上设置宽度。（参考：http://jsfiddle.net/52TUV/）
（注意：图像的样式只是为了保持它们的大小 - 它们不需要添加）

<div id="outer">
    <!-- image HTML stuff goes here -->
</div>

#outer{
    width: 1000px;
}

Answer 2

<div class="className">
    <!-- image -->
</div>

.className{
    width: 80%;
    height: 80%;
 }

Answer 3

试试这个 http://www.sohtanaka.com/web-design/css-columns-using-lists/

任何主流浏览器都不支持：last-child（）选择器。

Answer 4

使用此代码：

<html>
<head>
<style>
body{
background-color:#CCCCCC;
}
.product_image{
    float:left;
    background:#fff;
    padding:10px;
    margin-right:20px;
    margin-bottom:20px;
    -moz-box-shadow: 1px 2px 2px #ccc;
    -webkit-box-shadow: 1px 2px 2px #ccc;
    box-shadow: 1px 2px 2px #ccc;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<?php for($i=1; $i<=9; $i++){ ?>
<div class="product_image"><img src="image.jpg" /></div>
<?php 
if($i%3==0){
echo '<div class=clear></div>';
}
} ?>
</body>
</html>

使用while循环替换For循环，而不是显示所需的循环。仅使用缩略图图像再见

3列DIV之间的间距

4 个答案: