如何水平对齐两个父级（1个共同父级和1个唯一父级）内部的2个div？答案

【问题标题】：How to align 2 div horizontally that are both inside of 2 parents (1 common parent and 1 unique)?如何水平对齐两个父级（1个共同父级和1个唯一父级）内部的2个div？
【发布时间】：2019-09-11 10:47:24
【问题描述】：

一张图片 = 1000 字所以让我告诉你我的意思：

Div 1 是作为容器的公共父级，Divs 2 是作为列的唯一父级，Divs 3 是我要水平对齐的 2 个子级。它们的大小是动态的，并且没有一个具有固定高度，但如果其中一个高于另一个，我希望它们都以相同的高度显示。

我已经使用 flexbox 水平对齐 Divs 2，即使它们的 size ，这也是 HTML 和 CSS 现在的样子：

HTML

<div id="div1">
  <div id="div2">Text div 2
    <div id="div3">Text div 3</div>
  </div>
  <div id="div">Text div 2
    <div id="div3">Text div 3</div>
  </div>
</div>

CSS

#div1 {
  display:flex;
  flex-direction: row;
}

#div2 {
  border: 1px dotted black;
  border-radius: 20px;
}

您能帮我水平对齐 Divs 3 并使它们显示为相同的高度吗？

非常感谢！

【问题讨论】：

不可能在相邻的 flexbox 中对齐 flex 项...有关类似问题，请参阅 here...

标签： html css flexbox

【解决方案1】：

您可以在父级上使用align-items:stretch 来实现此目的

#div1 {

  display:inline-flex;
  border: 2px solid red;
}


#div3 {
  width: 200px;
  border: 2px solid lime;
}

#div3-2 {
  width: 200px;
  border: 2px solid lime;
}


#div,
#div2 {
  border: 2px solid blue;
  margin: 10px;
  padding: 10px;
  display: flex;
}

<div id="div1">

  <div id="div2">
    <div id="div3">Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text div 3Text xt di</div>
  </div>

  <div id="div">
    <div id="div3-2">Text div 3 Text di</div>
  </div>

</div>

【讨论】：

谢谢，但如果您运行 sn-p，您会发现 Divs3 的动态大小不同。
在您发布的图片中..您不希望绿色框（div 3）具有不同的大小吗？
不，抱歉，我的解释一定很糟糕。问题是它们有不同的大小，并且大小根据里面的文本是动态的。即使默认情况下它们的尺寸不同，我也希望它们的尺寸相同。
我添加了一些文字而不是固定高度，这有意义吗？
谢谢。两个 div 3 的高度不相等，但这是我正在寻找的。span>

【解决方案2】：

请尝试以下代码：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>test template</title>
    <!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

        <style>
          #div1 {

            display:inline-flex;
            flex-direction: row;
            align-items: stretch;
            border: 2px solid red;
          }


          #div3 {
            width: 100px; 
            border: 2px solid lime;
          }

          #div3-2 {
            width: 100px;
            border: 2px solid lime;
          }


          #div,
          #div2 {
            border: 2px solid blue;
            margin: 10px;
            padding: 10px;
          }

        </style>


</head>

<body>

  <div id="div1">

    <div id="div2">Text div 2
      <div id="div3">Text div 3</div>
    </div>

    <div id="div">Text div 2
      <div id="div3-2">Text div 3 lorem ipsum afda adsfa sdfa fdsa fdafdsa fda sdfa fd</div>
    </div>

  </div>
</body>

</html>

【讨论】：

谢谢。只要两个 Div3 都有固定的高度，它就可以工作，但如果我希望它们没有固定的大小，它就行不通。