Question

下面的代码水平显示3个圆圈。我希望代码适用于响应式网站。请指导我如何才能这样做。谢谢。 Fiddle

<div id="responsivearea" style="width: 900px; margin: 0 auto; clear: none;">
    <img class="  wp-image-2520 alignleft" style="float: left; clear: none; margin-left: 120px;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/good-employer.png" alt="good employer" width="201" height="199" /> 
    <img class="  wp-image-2521 alignleft" style="float: left; clear: none;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/gift-of-health.png" alt="gift of health" width="201" height="199" />
    <img class="  wp-image-2522 alignleft" style="float: left; clear: none;" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/Change-maker.png" alt="Change maker" width="201" height="199" />
</div>

Answer 1

它取决于你想要什么，但固定宽度和高边距不是解决方案，你需要在图像上使用另一个包装器来居中它们，并调整你的CSS：

<div id="responsivearea">
    <div class="img-center">
        <img class="wp-image-2520 alignleft" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/good-employer.png" alt="good employer" width="201" height="199" /> 
        <img class="wp-image-2521 alignleft" src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/gift-of-health.png" alt="gift of health" width="201" height="199" /> 
        <img class="wp-image-2522 alignleft"  src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/Change-maker.png" alt="Change maker" width="201" height="199" />
    </div>
</div>

和css：

#responsivearea{
    max-width: 900px; 
    margin: 0 auto; 
    clear: none;
    width: 100%;
    text-align: center;
}
.img-center{
    display:inline-block;
}
.alignleft{
    float: left; 
    clear: none;
}

这里有一个小提琴：http://jsfiddle.net/x9jjqugd/1/

希望我能帮忙！

Answer 2

不要使用花车，在父母身上使用text-align:center。

＆＃13;

div {
    max-width:900px;
    margin:0 auto;
    text-align: center;
}
img {
    width: 201px;
    height:199px;
}

＆＃13;

<div>
    <img src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/good-employer.png" alt=""/>
    <img src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/good-employer.png" alt=""/>
    <img src="http://www.inspuratesystems.com/nayajeevan/wp-content/uploads/2014/11/good-employer.png" alt=""/>
</div>

＆＃13;

让div响应边缘0自动

2 个答案: