Question

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

[[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的网格div中：

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

我觉得我的结构存在根本性的错误，但我不确定是什么。非常新的。

有什么想法吗？

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

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

Answer 1

只需删除 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%;
}

希望它有所帮助。

Answer 2

只需将text-allign属性更改为.left和.right

的中心

将行div中的3个div与文本居中对齐

2 个答案: