Как выровнять 2 div по горизонтали, которые находятся внутри 2 родителей (1 общий родитель и 1 уникальный)? - PullRequest
Новая
       24

Как выровнять 2 div по горизонтали, которые находятся внутри 2 родителей (1 общий родитель и 1 уникальный)?

0 голосов
/ 22 апреля 2019

Изображение = 1000 слов, поэтому позвольте мне показать вам, что я имею в виду:

Example Image

Div 1 - это общий родитель, который является контейнером, Div 2 - это уникальные родители, которые являются столбцами, а Div 3 - это 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>

CSS 

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

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

Не могли бы вы помочь мне выровнять Div 3 по горизонтали и сделать их одинаковыми по высоте, пожалуйста?

Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 22 апреля 2019

пожалуйста, попробуйте этот код: 

<!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>
0 голосов
/ 22 апреля 2019

вы можете использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...