Question

我有以下代码，显示图像混乱。我希望连续显示较小（33.3％）的图像，所有图像都具有相同的宽度和高度，并且在它们下面是一个链接，但是我被卡住了。有什么想法吗？

<style>
h4 {
    direction:ltr;
    text-align:center;
}

.line {
    position:relative;
    width: 33%;
    height:33%;
    margin-right: 1%;
}

.row {
    clear:both;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}
</style>

<div class="row">
    <div class="line">
        <img src="http://www.hdwallpapersmaza.com/wp-content/uploads/2014/03/Download-Space- Background-Images-4.jpg" />
        <h4><a href="#" target="_blank">www.asite.ro</a></h4>
    </div>

    <div class="line">
        <img src="https://static-secure.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/3/13/1363178656076/Google-talking-shoe-011.jpg" />
        <h4><a href="#" target="_blank">www.asite.ro</a></h4>
    </div>

    <div class="line">
        <img src="http://www.wired.com/wiredenterprise/wp-content/uploads//2012/10/ff_googleinfrastructure_large.jpg" />
        <h4><a href="#" target="_blank">www.asite.ro</a></h4>
    </div>
</div>

Answer 1

你只需要稍微清理你的代码

h4{direction:ltr;
              text-align:center;}
       .line{   
    position:relative;
    width: 32%;
    height:33%;
    margin-right:1%;

    float:left;


    }

.row{
   width:100%;

  overflow:hidden;


}
img
{
    width:100%;
    height:auto;

}

http://fiddle.jshell.net/prollygeek/GsrFR/

Div宽度高度无法正常显示

1 个答案: