Question

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

Example Image

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

我已经使用flexbox将Divs 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>

CSS

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

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

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

非常感谢！

Answer 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>

Answer 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>

如何在两个父级（一个普通父级和一个唯一父级）中水平对齐2个div？

2 个答案: