由中間元素

Question

考慮我們有一排一堆直列塊對齊一組直列塊：

<div class="elements-row"> 
    <div class="element">January</div> 
    <div class="element">February</div> 
    <div class="element">March</div> 
    <div class="element featured">April</div> 
    <div class="element">May</div> 
    <div class="element">June</div> 
    <div class="element">July</div> 
<div> 

---

.elements-row { 
    height: 140px; 
    display: inline-block; 
    text-align: center; 
    overflow: hidden; 
} 

.elements-row .element { 
    display: inline-block; 
    font-size: 40px; 
    color: #abb8c2; 
    margin: 0 15px; 
} 

.elements-row .element.featured { 
    margin: 0 40px; 
    color: #4a667f; 
} 

有沒有辦法來水平對齊行.featured塊總是保持在.elements-row塊的中間，無論其他元素的寬度是多少（其內容是動態的）。允許元素走出行的邊界，但除.featured之外的所有元素之間的空格應該是恆定的。

A demo on CodePen

Answer 1

你可以這樣來做：

.elements-row { 
 
    height: 140px; 
 
    display: block; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 

 
.elements-row .element { 
 
    display: inline-block; 
 
    font-size: 10px; 
 
    color: #abb8c2; 
 
    margin: 0 15px; 
 
} 
 

 
.elements-row .element.featured { 
 
    margin: 0 40px; 
 
    color: #4a667f; 
 
} 
 

 
.elements-center { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.elements-left { 
 
    top: 0; 
 
    position: absolute; 
 
    right: 100%; 
 
    white-space: nowrap; 
 
} 
 

 
.elements-right { 
 
    top: 0; 
 
    position: absolute; 
 
    left: 100%; 
 
    white-space: nowrap; 
 
}

<div class="elements-row"> 
 
    <div class="elements-center"> 
 
     <div class="elements-left"> 
 
      <div class="element">January</div> 
 
      <div class="element">February</div> 
 
      <div class="element">March</div> 
 
     </div> 
 
     <div class="element featured">April</div> 
 
     <div class="elements-right"> 
 
      <div class="element">May</div> 
 
      <div class="element">June</div> 
 
      <div class="element">July</div> 
 
     </div> 
 
    </div> 
 
</div>

同樣在JSFiddle ......至少東西開始。

Answer 2

使用flex這也是可能的。

你可以通過拉伸窗口來查看我的意思。 而不是使用justify-content: space-around您可能想要使用justify-content: space-between。

有關flex的更多信息，請參見this w3schools page。

---

更新：

這裏是一個JSFiddle用新的代碼，如果你想嘗試和調整窗口的大小，它可能效果更好。

.elements-row { 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.element { 
 
    font-size: 30px; 
 
    color: #abb8c2; 
 
    margin: 0 15px; 
 
} 
 

 
.featured { 
 
    color: #AAA; 
 
} 
 

 
.elements-left { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    flex: 1; 
 
} 
 

 
.elements-right { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
    flex: 1; 
 
}

<div class="elements-row"> 
 
    <div class="elements-left"> 
 
    <div class="element">lorem ipsum dolor sit amet</div> 
 
    <div class="element">February</div> 
 
    <div class="element">March</div> 
 
    </div> 
 
    <div class="element featured">April</div> 
 
    <div class="elements-right"> 
 
    <div class="element">May</div> 
 
    <div class="element">June</div> 
 
    <div class="element">July</div> 
 
    </div> 
 
</div>

---

舊代碼，可能對別人有用：

另外一個鏈接到the JSFiddle

.elements-row { 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.element { 
 
    font-size: 30px; 
 
    color: #abb8c2; 
 
    margin: 0 15px; 
 
} 
 

 
.featured { 
 
    color: #AAA; 
 
}

<div class="elements-row"> 
 
     <div class="element">January</div> 
 
     <div class="element">February</div> 
 
     <div class="element">March</div> 
 
     <div class="element featured">April</div> 
 
     <div class="element">May</div> 
 
     <div class="element">June</div> 
 
     <div class="element">July</div> 
 
    </div>