Автоматический подгонка динамического блока div

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 и его высота и ширина идут динамически. Я пытаюсь установить ширину div в макете .2 в пересчете на raw. Пожалуйста, предложите.

Answer 1

height контейнера div должен быть 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>