Question

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

摘要

我正在处理的网站是艺术家。在画廊页面中，并排有三行图像。高度都是相同的大小，但宽度设置为自动。

问题是左右图像需要左右对齐，而中间漂浮在中心。所有人都有相同的边距。

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

我尝试了什么

我试图将左右“artWrappers”位置设置为“绝对”，并使用left：0，right：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

你不需要左，右和中心课来做到这一点。只需在 .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

三个图像并排发出问题

4 个答案: