我有一个围绕两个内联块元素的容器。然而，容器坍塌（水平虚线）。如何阻止它折叠，以便我可以将背景颜色应用于容器。结构很重要，我想避免使用flex-box。同样重要的是，两个彩色方块正确对齐并且彼此相邻。
目的是在canvas元素上创建absolutley定位块元素。左侧有一个描述性名称，右侧有两个按钮。我必须与那里的工作合作，这样一个尽可能少变化的解决方案将是伟大的。
.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
发生这种情况是因为您绝对定位了.title3和.list元素，这些元素将其从正常流中移除。如果你想实现这个布局，请在你的float:right上使用ul并在你的clear中插入一个div (in the code below I achieved this using the :: after:pseudo element of yourdiv`）
* {
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>你必须为你的.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>