Html 如何水平对齐2个位于2个父级（1个公共父级和1个唯一父级）内部的2个div？_Html_Css_Flexbox

Html 如何水平对齐2个位于2个父级（1个公共父级和1个唯一父级）内部的2个div？

html css

Html 如何水平对齐2个位于2个父级（1个公共父级和1个唯一父级）内部的2个div？,html,css,flexbox,Html,Css,Flexbox,一张图片=1000个单词，让我告诉你我的意思： div1是公共父级，它是容器，div2是唯一的父级，它是列，div3是我要水平对齐的2个子级。它们的大小是动态的，没有一个具有固定的高度，但是如果其中一个比另一个高，我希望它们都以相同的高度显示我已经使用flexbox将div 2水平对齐，即使它们的大小相同，下面是HTML和CSS现在的外观： HTML <div id="div1"> <div id="div2">Text div 2 <div id

一张图片=1000个单词，让我告诉你我的意思：

div1是公共父级，它是容器，div2是唯一的父级，它是列，div3是我要水平对齐的2个子级。它们的大小是动态的，没有一个具有固定的高度，但是如果其中一个比另一个高，我希望它们都以相同的高度显示

我已经使用flexbox将div 2水平对齐，即使它们的大小相同，下面是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>

你能帮我把第三部分水平对齐，使它们看起来和原来一样高吗

非常感谢

您可以在父级上使用

对齐项目：拉伸来实现此目的

#第1部分{
显示：内联flex；
边框：2倍纯红；
}
#第三组{
宽度：200px；
边框：2倍固体石灰；
}
#第3-2分部{
宽度：200px；
边框：2倍固体石灰；
}
#分区，
#第二组{
边框：2件纯蓝；
利润率：10px；
填充：10px；
显示器：flex；
}

文本分割3文本分割3文本分割3文本分割3文本分割3文本分割3文本分割3文本分割3文本分割3文本分割3文本分割3文本分割3文本分割3文本分割3文本分割
文本分区3文本di
请尝试以下代码：
<!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>


测试模板
#第一组{
显示：内联flex；
弯曲方向：行；
对齐项目：拉伸；
边框：2倍纯红；
}
#第三组{
宽度：100px；
边框：2倍固体石灰；
}
#第3-2分部{
宽度：100px；
边框：2倍固体石灰；
}
#分区，
#第二组{
边框：2件纯蓝；
利润率：10px；
填充：10px；
}
文本分类2
文本第3部分
文本分类2
文本第3部分lorem ipsum afda adsfa sdfa fdsa fdafdsa fda sdfa fd
谢谢，但如果运行代码段，您会注意到Divs3动态大小不同。在您发布的图像中。。你不想让绿盒子（第3部分）有不同的尺寸吗？不，对不起，我一定解释得很糟糕。问题是它们有不同的大小，并且大小是动态的，取决于里面的文本。我希望它们的大小相同，即使默认情况下大小不同。我添加了一些文本而不是固定高度，这有意义吗？谢谢。两个三级舱的高度都不相等，这就是我要找的。谢谢。只要两个Div3都有一个固定的高度，它就可以工作，但如果我希望它们没有固定的大小，它就不能工作。在相邻的FlexBox中对齐flex项目是不可能的。。。有关类似问题，请参阅。。。
<!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>