Question

我正在尝试显示图像，左边一个，中间一个，右边一个，但我无法弄清楚我的HTML有什么问题。

<div class="content">
    <div class="modelListing"> 
        <a href="modelOne.html">
            <img src="modelOne.jpg" alt="Model One" class="modelThumb left" id="modelOneThumb" />
        </a><br /> 
        <span class="productThumbName"><a href="modelOne.html" class="noBold">Model Name</a></span>
    </div>
    <div class="modelListing"> 
        <a href="modelTwo.html">
            <img src="modelTwo.jpg" alt="Model Two" class="modelThumb center" id="modelTwoThumb" />
        </a><br /> 
        <span class="productThumbName"><a href="modelTwo.html" class="noBold">Model Name</a></span>
    </div>
    <div class="modelListing"> 
        <a href="modelThree.html">
            <img src="modelThree.jpg" alt="Model Three" class="modelThumb right" id="modelThreeThumb" />
        </a><br /> 
        <span class="productThumbName"><a href="modelThree.html" class="noBold">Model Name</a></span>
    </div>
</div>

该页面使用此CSS脚本：

body{
    background-image:url('bg.jpg'); 
    background-repeat:repeat-x;
    font-family: Arial; 
    color:#B5B5B5;
    text-align:center;
}
.content{
    font-size:1.25em; 
    margin:10px 100px;
}
img.modelThumb{
    width:225px;
    height:225px;
}
.left{
    float:left;
    position:relative;
}
.right{
    float:right;
    position:relative;
}
.center{
    float:center;
    position:relative;
}

我可能在这里犯了一个简单的错误，但任何帮助都会受到赞赏。非常感谢：）

Answer 1

请参阅DEMO

式

 .content{
    font-size:1.25em; 
    margin:10px 100px;

}
.modelListing{
    width: 33%;
    text-align: center;
}
img.modelThumb{
    width:225px;
    height:225px;
}
.left{
    float:left;
    position:relative;
}
.right{
    float:left;
    position:relative;
}
.center{
    float:left;
    margin: 0 auto;
}

将左，右，中心类添加到DIV

无法让图像向左中心和右侧浮动

1 个答案: