間距之間的3列的DIV

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箱偉大的工作，但更多的，顯示器搞砸。我怎麼能達到像上面的圖片？

來源

2011-07-19 Warface

在包含所有這些圖像的框上設置寬度。（參考：http://jsfiddle.net/52TUV/）
（注：樣式只維持其大小的圖像 - 他們不需要添加）

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

#outer{ 
    width: 1000px; 
}

來源

2011-07-19 22:04:29 Nightfirecat

是的，謝謝你！不知道這麼簡單的表情可能很難想象...... – Warface

試試這個 http://www.sohtanaka.com/web-design/css-columns-using-lists/

的：最後一個孩子（）選擇未在任何主流瀏覽器的支持。

來源

2011-07-19 20:04:38

請不要忘記，我也有多行，不僅一列中有3列。我會做的第四個div將打破浮動。 – Warface

：主要瀏覽器絕對支持最後一個子選擇器。它只是支持變得不完整的舊版瀏覽器。 – tw16

使用此代碼：

<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 Loop而不是顯示你想要的。請僅使用縮略圖圖像再見

來源

2012-11-05 06:05:49 akdesigner

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

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

來源

2012-11-05 06:14:17

間距之間的3列的DIV

回答

相關問題