Spacing between 3 columns DIVs
Here an example that I want
Those images are loaded from a while loop i开发者_运维问答n MySQL and would like that the spacing between them make in sort that the left column and right are touching each side and the middle in centered. Like the picture :D
The CSS I have:
#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;
}
And the loop
<div class="box">
<div><img src="imgs/beta/imgpasrap.jpg" width="286" height="176"/></div>
<p>Text here</p>
</div>
It's working great for the first 3 box, but more than that, the display is messed up. How could I achieve that like the picture above?
Set a width on the box containing all of these images. (reference: http://jsfiddle.net/52TUV/)
(note: the styles for the images are only to maintain their size - they do not need to be added)
<div id="outer">
<!-- image HTML stuff goes here -->
</div>
#outer{
width: 1000px;
}
<div class="className">
<!-- image -->
</div>
.className{
width: 80%;
height: 80%;
}
Try this http://www.sohtanaka.com/web-design/css-columns-using-lists/
The :last-child() selector is not supported in any of the major browsers.
Use this Code:
<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>
Relace For Loop with your while loop than show which you want. Use only thumbnail image bye
加载中,请稍侯......
精彩评论