我有非常基本的图片库我如何能把它固定为3列2行
这是HTML代码
<div id="gallery">
<div class="img">
<a target="_blank" href="klematis_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis"/> </a>
<div class="descHead">
כותרת
</div>
<div class="desc">
Add a description of the image here
</div>
</div>
<div class="img">
<a target="_blank" href="klematis2_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
<div class="descHead">
כותרת
</div>
<div class="desc">
Add a description of the image here
</div>
</div>
<div class="img">
<a target="_blank" href="klematis3_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
<div class="descHead">
כותרת
</div>
<div class="desc">
Add a description of the image here
</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
<div class="descHead">
כותרת
</div>
<div class="desc">
Add a description of the image here
</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
<div class="descHead">
כותרת
</div>
<div class="desc">
Add a description of the image here
</div>
</div>
<div class="img">
<a target="_blank" href="klematis4_big.htm"> <img src="../zeela/img/image_1.png" alt="Klematis" /> </a>
<div class="descHead">
כותרת
</div>
<div class="desc">
Add a description of the image here
</div>
</div>
</div>
这是CSS代码
#gallery{
}
div.img {
margin: 2px;
height: auto;
width: auto;
float: right;
}
div.img img {
width: 200px; /* what is the img size*/
height: 200px;
display: inline;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 20px;
border: 1px solid #ffffff;
}
/*
div.img a:hover img {
border: 1px solid #0000ff;
}*/
div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 30px;
}
.descHead {
margin-right: 30px;
margin-top: 20px;
margin-bottom: 15px;
font-family: Tahoma;
font-size: 24px;
color: #323232;
}
.desc {
margin-right: 30px !important;
margin-bottom: 40px !important;
font-family: Tahoma;
font-size: 14px;
color: #323232;
}
如果您不能更改HTML，可以使用以下方法:
.gallery {
width: /* ((width of .image including padding/margin) * 3) */
overflow: hidden;
margin: /* top: 0, right: 0, bottom: -(size of .image's bottom margin), left: -(size of .image's left margin) */
/*
yes, that's right, the left/bottom margins are negative, but it's purely presentational
for left floated .image, replace right with left
*/
}
否则，使用CSS display属性将会起作用。
还应该指出，节/标题/段落标记可能比无意义的div标记更合适。可替换地，图/图标题集合也可能是适当的:
http://html5doctor.com/the-figure-figcaption-elements/
我会考虑使用CSS显示:table:http://www.w3schools.com/cssref/pr_class_display.asp
