我尝试在六个单独的div中显示图像。所有div都放置在正确的位置。但是中心div位置看起来像是一个向上而另一个中心div向下我也发布图像所以你更好地理解我想说什么,我也发布HTML和CSS代码.. { {3}}
.cat_section {
text-align: center;
}
.cateogry_div {
display: inline-block;
float: none;
background-image: url('http://elemisdesign.com/img/114/1.jpg');
width: 300px;
height: 200px;
margin-top: 90px;
margin-left: 30px;
}
.sub_category {
margin-left: 30px;
margin-top: 10px;
}
.image_cat {
width: 170px;
margin-left: 90px;
}
.sub_category span {
font-size: 20px;
float: right;
margin-right: 180px;
margin-top: -90px;
width: 110px;
height: 120px;
}
.cateogry_div1 {
display: inline-block;
float: none;
background-image: url('http://elemisdesign.com/img/114/1.jpg');
width: 300px;
height: 200px;
margin-top: 90px;
margin-left: 40px;
}
.cateogry_div2 {
display: inline-block;
float: none;
background-image: url('http://elemisdesign.com/img/114/1.jpg');
width: 300px;
height: 200px;
margin-top: 90px;
margin-left: 50px;
}
.cateogry_div3 {
display: inline-block;
float: none;
background-image: url('http://elemisdesign.com/img/114/1.jpg');
width: 300px;
height: 200px;
margin-top: 90px;
margin-left: 30px;
}
.cateogry_div4 {
display: inline-block;
float: none;
background-image: url('http://elemisdesign.com/img/114/1.jpg');
width: 300px;
height: 200px;
margin-top: 150px;
margin-left: 40px;
}
.cateogry_div5 {
display: inline-block;
float: none;
background-image: url('http://elemisdesign.com/img/114/1.jpg');
width: 300px;
height: 200px;
margin-top: 90px;
margin-left: 50px;
}

<div class="cat_section">
<div class="cateogry_div">
<div class="sub_category">
<img class="image_cat" src="images/watch.jpg" />
<span>Handwatches</span>
</div>
</div>
<div class="cateogry_div1">
<div class="sub_category">
<img class="image_cat" src="images/pocket_purse.jpg" />
<span>Pocket</span>
<br />
<span>Purse</span>
</div>
</div>
<div class="cateogry_div2">
<div class="sub_category">
<img class="image_cat" src="images/rings.jpg" />
<span>Rings</span>
</div>
</div>
<br />
<div class="cateogry_div3">
<div class="sub_category">
<img class="image_cat" src="images/bangles.jpeg" />
<span>Bangles</span>
</div>
</div>
<div class="cateogry_div4">
<div class="sub_category">
<img class="image_cat" src="images/sunglasses.jpeg" />
<span>Sun glasses</span>
</div>
</div>
<div class="cateogry_div5">
<div class="sub_category">
<img class="image_cat" src="images/clutch.jpeg" />
<span>Clutch</span>
</div>
</div>
</div>
&#13;
有任何帮助吗?
答案 0 :(得分:1)
添加
vertical-align: top;
到您的.category_div
容器,然后删除
margin-top: 150px;
来自.category_div4
(放90px,与其他所有相同)
答案 1 :(得分:0)
你在口袋钱包之间使用br标签,原因是,在口袋和钱包之间移除br
<强> HTML 强>
<div class="cateogry_div1">
<div class="sub_category">
<img class="image_cat" src="images/pocket_purse.jpg" /> <span>Pocket</span> <span>Purse</span>
</div>
</div>
答案 2 :(得分:0)
这是一个不同的答案,涉及重组一些HTML&amp; CSS。获取您所使用的布局时,此代码可能会更加稳定。
注意: 只需将http://placehold.it/170x170
占位符图片替换为您自己的图片。
<div class="cat_section">
<div class="category" id="cateogry_div">
<div class="sub_category">
<img class="image_cat" src="http://placehold.it/170x170" />
<p>Handwatches</p>
</div>
</div>
<div class="category" id="category_div1">
<div class="sub_category">
<img class="image_cat" src="http://placehold.it/170x170" />
<p>Pocket<br />Purse</p>
</div>
</div>
<div class="category" id="category_div2">
<div class="sub_category">
<img class="image_cat" src="http://placehold.it/170x170" />
<p>Rings</p>
</div>
</div>
<div class="category" id="category_div3">
<div class="sub_category">
<img class="image_cat" src="http://placehold.it/170x170" />
<p>Bangles</p>
</div>
</div>
<div class="category" id="category_div4">
<div class="sub_category">
<img class="image_cat" src="http://placehold.it/170x170" />
<p>Sun glasses</p>
</div>
</div>
<div class="category" id="category_div5">
<div class="sub_category">
<img class="image_cat" src="http://placehold.it/170x170" />
<p>Clutch</p>
</div>
</div>
</div>
.cat_section {
text-align: center;
}
.category {
display: block;
float: left;
background-image: url('http://elemisdesign.com/img/114/1.jpg');
width: 300px;
height: 200px;
margin-top: 90px;
margin-left: 30px;
}
.sub_category {
/*margin-left: 30px;
margin-top: 10px;*/
padding: 10px;
}
.image_cat {
float: right;
width: 170px;
margin-left: 10px;
}
.sub_category p {
float: right;
width: 100px;
padding-top: 50px;
font-size: 20px;
}