將文本與第一個左側塊對齊

Question

我想將文本與第一個左側塊對齊。該塊與中間對齊。更改屏幕/瀏覽器寬度時，應調整文本。

做什麼，要得到這樣的：

是否有可能在IE瀏覽器？

#container { 
 
    border: 1px solid gray; 
 
} 
 
.outerBlock { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 
.block { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #cccccc; 
 
    margin: 10px; 
 
}

<div id="container"> 
 
    Aligned left to first block 
 
    <div class="outerBlock"> 
 
    <div class="block">1</div>  
 
    <div class="block">2</div>  
 
    <div class="block">3</div>  
 
    <div class="block">4</div>  
 
    <div class="block">5</div> 
 
    </div> 
 
</div>

Answer 1

與Flexbox的做到這一點的唯一方法是在箱子設置爲justify-content: space-between;。然後給頂部的文字10px的的左緣：

#container { 
 
    border: 1px solid gray; 
 
} 
 

 
#container span{ 
 
\t margin-left:10px; 
 
} 
 

 
.outerBlock { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
.block { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #cccccc; 
 
    margin: 10px; 
 
}

<div id="container"> 
 
    <span>Aligned left to first block</span> 
 
    <div class="outerBlock"> 
 
     <div class="block">1</div> 
 
     <div class="block">2</div> 
 
     <div class="block">3</div> 
 
     <div class="block">4</div> 
 
     <div class="block">5</div> 
 
    </div> 
 
</div>

UPDATE：用jQuery的定位

var el = $('.outerBlock > .block'); 
 
var os = el.offset(); 
 

 
$('.blockText').css("margin-left",os.left - parseInt(el.css('margin-left')));

*{ 
 
    box-sizing:border-box; 
 
} 
 

 
#container { 
 
    border: 1px solid gray; 
 
} 
 

 
.outerText { 
 
    border: 1px solid red; 
 
} 
 

 
.outerBlock { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
.block { 
 
    width: 150px; 
 
    height: 150px; 
 
    background-color: #cccccc; 
 
    margin: 10px; 
 
} 
 
.blockText { 
 
    width: 150px; 
 
    max-height: 20px; 
 
    margin: 0 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="outerText"> 
 
     <div class="blockText">News</div> 
 
    </div> 
 
    
 
    <div class="outerBlock"> 
 
     <div class="block">1</div> 
 
     <div class="block">2</div> 
 
     <div class="block">3</div> 
 
     <div class="block">4</div> 
 
     <div class="block">5</div> 
 
    </div> 
 
</div>