Question

<div class="main">
    <div class="test" style="width:40px;height:100px"><div>
    <div class="test" style="width:20px;height:150px;"><div>
    <div class="test" style="width:40px;height:100px;"><div>
    <div class="test" style="width:40px;height:100px;"><div>
</div>

.main{
    position:relative;
    border:1px solid red;
    width:140px;
    height:400px;
}
.test{
    float:left;
    border:1px solid silver;
    position:relative;
    padding:10px;
    display:inline-block;
}

Div及其高度和宽度动态变化。我试图在布局.2每个原始上适合div宽度。请建议。

Answer 1

容器div的height应为auto。因此，它将采用最佳空间来适应内部元素。

.main {
    ...
    height: auto;
}

Demo

.main {
  border: 1px solid red;
  width: 140px;
  height: auto;
  overflow: hidden;
}
.test {
  float: left;
  border: 1px solid silver;
  position: relative;
  padding: 10px;
  display: inline-block;
}

<div class="main">
  <div class="test" style="width:40px;height:100px"></div>
  <div class="test" style="width:20px;height:150px;"></div>
  <div class="test" style="width:40px;height:100px;"></div>
  <div class="test" style="width:40px;height:100px;"></div>
</div>

Answer 2

如果您已经使用Bootstrap，则可以使用其类每行制作2个项目

https://jsfiddle.net/3mdrrjf8/1/

<div class="main row">
  <div class="test col-md-8 col-xs-6" style="height:100px"></div>
  <div class="test col-md-8 col-xs-6" style="height:150px;"></div>
  <div class="test col-md-8 col-xs-6" style="height:100px;"></div>
  <div class="test col-md-8 col-xs-6" style="height:100px;"></div>
</div>

自动调整动态div块

2 个答案: