排列在行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/
这里的关键是我希望左右图像一直对齐到任何一边的红色边框。
只删除类旁边的col-4类。
它看起来是这样的:
<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%;
}
希望它能帮助。
感谢您的链接!我之前没有使用Jsfiddle,非常有帮助。 – ljhennessy
我创建了一个JSFiddle https://jsfiddle.net/ljhennessy/j8jrn719/。问题(正如你所看到的)是,图像仍然没有与行左边和右边对齐(即红色边框)。 – ljhennessy
只需为图像添加样式。宽度:100%。我已经更新了jsfiddle链接。 –
只要将text-allign属性改为以.left和.right为中心
您可以制作小提琴吗? – potashin
@ljhennessy你想要什么?这是你所表现的第一个例子吗? – divy3993
是的。左右图像必须与行的各个边对齐。下面的文字和链接应该与图像对齐。 – ljhennessy