1

我认为我的浮动有问题，它们没有正确对齐，我觉得这与我设置盒子的方式有关。我尝试使用左右边距更改对齐方式，但没有得到想要的外观，我希望所有这些都排列整齐。这是html和css。

HTML

<div id="service1">
    <center>
    <h1>Savings <br />Strategies</h1>
    <img src="images/eg1.png" class="alignleft" height="150" width="200" alt="" />
    </center>
</div>

<div id="service2">
    <center>
    <h1>Vendor <br />Management</h1>
    <img src="images/eg2.png" class="alignleft" height="150" width="200" alt="" />
    </center>
</div>

<div id="service3">
    <center>
    <h1>Environmental<br /> Stewardship</h1>
    <img src="images/eg3.png" class="alignleft" height="150" width="200" alt="" />
    </center>
</div>

CSS

#service1 {
float:left;
width:360px;
height:280px;
padding:15px;
}

#service2 {
margin-left:auto;
margin-right:auto;
width:360px;
height:280px;
padding:15px;
}

#service3 {
float:right;
width:360px;
height:280px;
padding 15px; 
}

提前致谢！

4

2 回答 2

5

为什么不尝试将每个 div 显示为内联块。删除所有的浮动和边距。

div {显示：内联块；}

于 2013-04-19T05:52:24.763 回答
1

您可以设置display并inline删除所有边距：http:
//jsfiddle.net/ABVJd/2/
结果：http: //jsfiddle.net/ABVJd/2/embedded/result

要么，或者您可以删除所有边距和浮动并添加内联块，如建议的那样：http:
//jsfiddle.net/ABVJd/3/
结果：http: //jsfiddle.net/ABVJd/3/

于 2013-04-19T06:02:07.540 回答