實現3行自舉

Question

我想要得到這樣的結果與自舉排列的方形：

的想法將是：黑方逗留一個正方形，即使有正確的「行」被調整（移動爲例） ，紅色的行會具有相同的高度/寬度（我失敗了圖像，只是一個快速的油漆樣機上）

我很願意爲你展示一些代碼，將是一個起點，但幾個小時後，我無法達到這種效果......

我fo und使用這種結構的模板： Gridus

Answer 1

你的意思是這樣的嗎？我沒有邊界麻煩，但我可以把它如果你喜歡

.left-div { 
 
    background-color: pink; 
 
    height: 120px; 
 
    width: 120px; 
 
    float:left; 
 
} 
 

 
.right-div { 
 
    background-color: red; 
 
    height: 120px; 
 
    float:left; 
 
} 
 
.col-xs-12{ 
 
    height: 40px; 
 
    
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="left-div">Column 1</div> 
 
    <div class="right-div"> 
 
     <div class="row"> 
 
     <div class="col-xs-12">Row 1</div> 
 
     <div class="col-xs-12">Row 2</div> 
 
     <div class="col-xs-12">Row 3</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

使用Flexbox將作爲包裝。

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.flexbox { 
 
    display: flex; 
 
    justify-content: left; 
 
    align-items: flex-start; 
 
} 
 

 
.col-md-10 { 
 
    border: thin solid darkgray; 
 
    max-height: 50px; 
 
    overflow: hidden; 
 
    height: 50px; 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row nopadding flexbox"> 
 
    <a href="#"> 
 
    <div class="col-md-4 vc-photo photo-01"><img src="http://placehold.it/150" /></div> 
 
    </a> 
 
    <div class="col-md-8 nopadding"> 
 
    <div class="row nopadding"> 
 
     <div class="col-md-10"> 
 
     <p>Bla</p> 
 
     </div> 
 
    </div> 
 
    <div class="row nopadding"> 
 
     <div class="col-md-10"> 
 
     <p>Bla</p> 
 
     </div> 
 
    </div> 
 
    <div class="row nopadding"> 
 
     <div class="col-md-10"> 
 
     <p>Bla</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>