三张图片并排出现问题

Question

JSFiddle: http://jsfiddle.net/M6g85/2/

总结

我正在开发的网站是为艺术家服务的。在图库页面中，三个图像并排排列。高度都将是相同的大小，但宽度设置为自动。

问题是左右图像需要左右对齐，而中间浮动在中心。它们之间的所有边距相等。

我创建了另一个名为“artWrapper”的类，这是为了保持标题文本与图像内联。

我的尝试

我尝试将左右“artWrappers”位置设置为“绝对”，并使用左：0，右：0，但中间的没有任何东西可以浮动。

我尝试手动设置边距以强制它们对齐，但是当图像宽度不同时，图像之间的间隙会变得混乱。

我要做什么

获取左右图像保持在容器的最左侧和最右侧，中间图像以图像两侧等距居中。

标题文本必须保持在图片上方，并且图片高度相同，宽度会有所不同。

**代码**

HTML：

<div id="wrapper">
    <div class="col33">
        <div class="artWrapper left">
                <h2>Image 1</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper center">
                <h2>Image 2</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper right">
                <h2>Image 3</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="clearfix"></div>
</div>

CSS：

#wrapper {
    width:700px;
    border:1px solid;
}
.col33 {
    width:33.33%;
    float:left;
    margin:0 auto;
    max-height:521px;
}
.artWrapper {
    display:block;
}
.left {
    position:relative;
    left:0;
}
.center {
    position:relative;
    margin:0 auto;
}
.right {
    position:relative;
    right:0;
}
.clearfix {
    clear:both;
}

Answer 1

这是使用内联块构建此布局的一种方法。

你的 HTML 是好的。

试试下面的CSS：

#wrapper {
    width:700px;
    border:1px solid;
    text-align: justify;
    line-height: 0;
}
.col33 {
    max-height: 521px;
    display: inline-block;
    line-height: 1;
}
.artWrapper {
}
.artWrapper img {
    display: block;
}
/* You could replace .clearfix element with a pseudo-element */
.clearfix {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    height: 0;
}

在父容器#wrapper 上，设置text-align: justify 和line-height: 0。

对于.col33 元素，设置display: inline-block 和line-height: 1（或基于您的版式设计的一些合适的值）。

将display: block 应用于.artWrapper img 以防止图像底部出现一些额外的空白。

在您的.clearfix 元素上，设置display: inline-block、vertical-align: top、width: 100% 和height: 0。

为了使text-align: justify 工作，您至少需要两行内联元素，在这种情况下，图像构成一行，.clearfix 构成第二行。通过将.clearfix 的宽度设置为 100%，它会占据整条线，因此可以保证如果您的图像非常窄，总会有第二条线。 vertical-align: top 和 height: 0 消除了由于默认内联框的前导而产生的任何额外空白。

在包装器上设置line-height: 0 然后为.col33 子元素重置它很重要，否则您会在底部边框和内容之间得到一些剩余的空白。

查看演示：http://jsfiddle.net/audetwebdesign/QM9Ub/

Answer 2

如果我理解这个问题，建议根据您的示例重新做出决定Codepen DEMO 当然这不是一个完美的解决方案，但我认为你想要实现的方式

HTML

<div id="wrapper">
    <div class="col33">
        <div class="artWrapper left">
                <h2>Image 1</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper center">
                <h2>Image 2</h2>

            <img src="http://placehold.it/550x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper right">
                <h2>Image 3</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="clearfix"></div>
</div>

CSS

#wrapper {
    width:100%;
    border:1px solid;
  text-align:center;
}
.col33 {
    /*width:33.33%;*/
    /*float:left;*/
  display:inline-block;
    margin:0 auto;
    max-height:521px;
}
.artWrapper {
    display:block;
  width: 100%;
  height: auto;
}
.left {
    position:relative;
    left:0;
}
.center {
    position:relative;
    margin:0 auto;
}
.right {
    position:relative;
    right:0;
}
.clearfix {
    clear:both;
}

Answer 3

您不需要 left、right 和 center 类来做到这一点。只需在 .artWrapper

中添加 text-align:center

#wrapper {
    width:100%;
    border:1px solid;
}
.col33 {
    width:33.33%;
    float:left;
    margin:0 auto;
    max-height:521px;
}
.artWrapper {
    display:block;
    text-align:center;
}

HTML

<div id="wrapper">
    <div class="col33">
        <div class="artWrapper">
                <h2>Image 1</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper">
                <h2>Image 2</h2>

            <img src="http://placehold.it/400x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper">
                <h2>Image 3</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="clearfix"></div>
</div>

Answer 4

使用 table 和 table-cell 属性，您可以实现这一点。如下所示更新您的 CSS。

#wrapper {
width:700px;
border:1px solid;
display:table;
}
.col33 {
display:table-cell;
max-height:521px;
width:auto;
}
.artWrapper {
 display:block;
}

.clearfix {
clear:both;
}
.left
{
text-align:left;
 }
.right
{
text-align:right;
}
.center
{
text-align:center;
}

Fiddle Demo