Как обернуть элемент контейнера вокруг дочерних блоков - PullRequest
Новая
       19

Как обернуть элемент контейнера вокруг дочерних блоков

0 голосов
/ 28 февраля 2019

У меня есть контейнер вокруг двух встроенных элементов блока.Однако контейнер разрушается (горизонтальная пунктирная линия).Как мне предотвратить его свертывание, чтобы я мог применить цвет фона к контейнеру.Структура важна, и я хочу избегать использования flex-box.Также важно, чтобы два цветных квадрата были выровнены по правому краю и расположены рядом друг с другом.

Цель состоит в том, чтобы создать абсолютно позиционированный блочный элемент поверх элемента canvas.С описательным названием слева и двумя кнопками справа.Я должен работать с тем, что есть, поэтому решение, которое включает в себя как можно меньше изменений, было бы замечательно. 

    .header3 {
      width: 300px;
      background-color: lightgray;
      border: 1px dashed grey;
      position:relative;
      
    }
    
    .title3{
      position:absolute;
      top:0px;
      left:0px;
      display:inline-block;
      vertical-align:center;
      background-color:#bada55;
    }
    
    .list {
      list-style:none;
      margin:0px;
      padding:0px;
      border:1px dashed green;
      position:absolute;
      display:inline-block;
      top:0px;
      right:0px; 
    }
    
    .item {
      width: 50px;
      height: 50px;
      display: inline-block;
      text-align: center;
    }
    
    .item-1 {
      background-color: orangered;
    }
    
    .item-2 {
      background-color: skyblue;
    }
    <body>
      <br>
      <div class="header3">
        <div class="title3">bollard name</div>
        <ul class="list">
          <li class="item item-1"></li>
          <li class="item item-2"></li>
        </ul>
      </div>
    </body>

Codepen здесь

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Это происходит потому, что вы абсолютно позиционировали свои элементы .title3 и .list, которые удаляют их из обычного потока.Если вы хотите добиться этого макета, используйте float:right на вашем ul и вставьте clear в ваш div (in the code below I achieved this using the :: after :pseudo element of your div`) 

* {
  font-family: "Helvetica";
}

/* list */

.header3 {
  width: 300px;
  background-color: lightgray;
  border: 1px dashed grey;
  position:relative;

}

.header3::after {
  content: '';
  display: table;
  clear: both;
}

.title3{
  display:inline-block;
  vertical-align:center;
  background-color:#bada55;
}

.list {
  list-style:none;
  margin:0px;
  padding:0px;
  border:1px dashed green;
  float: right;
}

.item {
  width: 50px;
  height: 50px;
  display: inline-block;
  text-align: center;
}

.item-1 {
  background-color: orangered;
}

.item-2 {
  background-color: skyblue;
}
<div class="header3">
    <div class="title3">bollard name</div>
    <ul class="list">
      <li class="item item-1"></li>
      <li class="item item-2"></li>
    </ul>
  </div>
0 голосов
/ 28 февраля 2019

Вы должны добавить высоту к вашему .header3 и позволить .list и .item наследовать его height. 

* {
  font-family: "Helvetica";
}

/* list */

.header3 {
  width: 300px;
  height: 50px; /* Added height here */
  background-color: lightgray;
  border: 1px dashed grey;
  position:relative;
}

.title3{
  position:absolute;
  top:0px;
  left:0px;
  display:block;
  vertical-align:center;
  background-color:#bada55;
}

.list {
  list-style:none;
  margin:0px;
  padding:0px;
  border:1px dashed green;
  position:absolute;
  display:inline-block;
  top:0px;
  right:0px; 
  height: 100%; /* Inherited height here */
}

.item {
  width: 50px;
  height: 100%; /* Inherited height here */
  display: inline-block;
  text-align: center;
}

.item-1 {
  background-color: orangered;
}

.item-2 {
  background-color: skyblue;
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <br>
  <div class="header3">
    <div class="title3">bollard name</div>
    <ul class="list">
      <li class="item item-1"></li>
      <li class="item item-2"></li>
    </ul>
  </div>
</body>

</html>
...