排列在行div与文本居中的3 divs

与How to align 3 divs (left/center/right) inside another div?类似，我试图对齐父div内的三个div。增加的复杂性是每个div包含图像，文本和链接。我想这些对齐链接，以便：排列在行div与文本居中的3 divs

[[LEFT-IMG] [CENTER-IMG] [RIGHT-IMG]] 
    text   text   text 
    link   link   link

不过，我能得到的最接近的是：

[[LEFT-IMG] [CENTER-IMG] [RIGHT-IMG]] 
text    text    text 
link    link    link

在文本和镜像图像的比对环节。

这里我的HTML：

<div class="row"> 
    <div class="col-4 left"> 
     <img src="http://placehold.it/250x150" alt="Thing 1"> 
     <p>THING 1</p> 
     <a href="somedomain.com">somedomain.com</a> 
    </div> 
    <div class="col-4 center"> 
     <img src="http://placehold.it/250x150" alt="Thing 2"> 
     <p>THING 2</p> 
     <a href="somedomain.com">somedomain.com</a> 
    </div> 
    <div class="col-4 right"> 
     <img src="http://placehold.it/250x150" alt="Thing 3"> 
     <p>THING 3</p> 
     <a href="somedomain.com">somedomain.com</a> 
    </div> 
    </div>

我的CSS：

.row { 
    margin: 0 auto; 
    max-width: 1000px; 
    width: 100%; 
    display: flex; 
    right: 0; 
    text-align: center; 
    flex-wrap: wrap; 
} 

.left { 
    display: inline-block; 
    text-align: left; 
} 

.right { 
    display: inline-block; 
    text-align: right; 
} 

.center { 
    display: inline-block; 
    margin: 0 auto; 
} 
.col-4 { 
    width: 33.33%; 
}

注意，这些都是用下面的CSS网格格内：

.grid { 
    margin: 0 auto; 
    max-width: 1000px; 
    display: flex; 
    flex-wrap: wrap; 
}

我有一种感觉我的结构有一些根本性的错误，但我不确定是什么。这是非常新的。

任何想法？

更新：这里是一个JSFiddle显示当前进度。 http://jsfiddle.net/ljhennessy/j8jrn719/

这里的关键是我希望左右图像一直对齐到任何一边的红色边框。

来源

2015-06-21 ljhennessy

您可以制作小提琴吗？ – potashin

@ljhennessy你想要什么？这是你所表现的第一个例子吗？ – divy3993

是的。左右图像必须与行的各个边对齐。下面的文字和链接应该与图像对齐。 – ljhennessy

只删除类旁边的col-4类。

这是Jsfiddle link。

它看起来是这样的：

<div class="row"> 
    <div class="col-4"> 
    <img src="http://placehold.it/250x150" alt="Thing 1"> 
    <p>PROJECT 1</p> 
    <a href="somedomain.com">somedomain.com</a> 
    </div> 
    <div class="col-4"> 
    <img src="http://placehold.it/250x150" alt="Thing 2"> 
    <p>THING 2</p> 
    <a href="somedomain.com">somedomain.com</a> 
    </div> 
    <div class="col-4"> 
    <img src="http://placehold.it/250x150" alt="Thing 3"> 
    <p>THING 3</p> 
    <a href="somedomain.com">somedomain.com</a> 
    </div> 
</div>

正好与列您的图像只是这个代码添加到你的CSS：

img { 
    width: 100%; 
}

希望它能帮助。

来源

2015-06-21 14:18:01

感谢您的链接！我之前没有使用Jsfiddle，非常有帮助。 – ljhennessy

我创建了一个JSFiddle https://jsfiddle.net/ljhennessy/j8jrn719/。问题（正如你所看到的）是，图像仍然没有与行左边和右边对齐（即红色边框）。 – ljhennessy

只需为图像添加样式。宽度：100％。我已经更新了jsfiddle链接。 –

只要将text-allign属性改为以.left和.right为中心

来源

2015-06-21 14:31:03

排列在行div与文本居中的3 divs

回答

相关问题