实现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>