Question

我有一个围绕两个内联块元素的容器。但是，容器会折叠（水平虚线）。如何防止其塌陷，以便可以将背景色应用于容器。结构很重要，我想避免使用flex-box。同样重要的是，两个彩色正方形必须正确对齐并彼此相邻。

目标是在画布元素上创建一个绝对定位的块元素。左侧带有描述性名称，右侧带有两个按钮。我必须使用其中的内容，因此解决方案所涉及的更改尽可能少将是很棒的。

    .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 here

Answer 1

您必须为.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>

Answer 2

之所以发生这种情况，是因为您将.title3和.list元素放置在绝对位置，从而将它们从常规流程中删除。如果要实现此布局，请在float:right上使用ul，然后在clear ::之后div (in the code below I achieved this using the div`）插入:pseudo element of your

* {
  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>

如何将容器元素包装在内嵌子元素周围

2 个答案: