1. 首页
  2. 问题列表
  3. 如何给html div位置动态高度
提问者：小点点

如何给html div位置动态高度


在这里输入图像描述我有3个div显示为块（默认），div-1，div-2，div-3，我在div-1，tab和tabcontent中有两个内部div，

{box-sizing: border-box}

#div-one {
border: solid 2px red;
display: block;
}

.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
   width: 30%;
}

.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none; 
}

#div-two {
border: solid 2px blue;
}

#div-three {
border: solid 2px black; 
}

目前一个高度是0，div-2和div-3的高度等于内容高度，但是div-1的内容是在它们上面的，我如何给div-1添加高度来适应动态内容

<div id='div-one'> 
<div class="tab" >
  <button class="tablinks" >London</button> 
</div>

<div id="London" class="tabcontent">
  <h3>London</h3> 
</div> 
</div>

<div id="div-two" >
<p>Click </p>
</div>

<div id="div-three" > 
  <p>Tokyo </p>
</div>

共2个答案

匿名用户

.tab和.tabContent上的float:left声明从正常流中删除这些元素（但仍然是流的一部分）。

  • 参见浮动(MDN)

“clearfix”黑客将包含您的浮动。

#div-one::after {
  content: "";
  display: table;
  clear: both;
}
  • 请参阅ClearFix:强制元素自清除其子元素（CSS-Tricks)
  • 查看新的micro clearfix hack（Nicolas Gallagher)

另外，考虑使用FlexBox。 删除float声明，然后添加以下声明（也可以删除width声明）:

#div-one {
  display: flex;
}

.tab {
  flex: 0 0 30%;
}

.tabcontent {
  flex: 0 0 70%;
}
  • 请参阅Flexbox(MDN)

匿名用户

如果将#div-one显示属性更改为

 #div-one{
    display:flex;
    flex-direction: row;
 }

应该管用。 还可以添加align属性来对齐其内容。

 #div-one{
    display:flex;
    flex-direction: row;
    align-items: center;
 }

相关问题