佈局拼圖：對齊到左側和右側加上一個居中的框全部用一條線連接

Question

我想解決這個佈局拼圖，但卡在如何讓它優雅，乾淨和永恆。

已知：
- 1米像素高度的水平線在
容器及其內部的拉伸 - 垂直以及horitontally居中框移到該線
- 左對齊文本框 - 和右對齊的文本盒子

我試過的東西，是痛苦地增加percengates，直到我達到某種中間...警告，免責聲明，下面的代碼是非常圖形和醜陋的！

CSS

author{color: grey} 
box{float: left; 
    background: blue; 
    margin: 0 0 0 46.4%; 
    ... 
    /* bad coding feel embarrassed showing this */ 
} 
time{color: grey} 

HTML（靈活，請改變，如果需要的話）

<author></author> 
<box><img src=""/></box> 
<time></time> 

我首先想到這可能在Flexbox，就可以解決，使用justify-content: space-between然而，我無法弄清楚如何使線出現在那裏。所以我願意提供任何有關它的舊定位/浮動或Flexbox的建議。試試兩種方式解決問題，看看哪一個最優雅？提前致謝！

Answer 1

這裏是實現的一個方法，在您使用justify-content: space-between對齊author/box/date和絕對定位僞元素拿捏

#wrapper { 
 
    position: relative; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
#wrapper::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; right: 0; 
 
    top: 50%; height: 1px; 
 
    background: gray; 
 
} 
 
#wrapper > * { 
 
    position: relative;   /* instead of 'z-index: -1' on the pseudo so 
 
            the line stays below the items */ 
 
} 
 

 
#author {} 
 

 
#date {} 
 

 
#box { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: blue; 
 
}

<div id="wrapper"> 
 
    <div id="author"> 
 
    Author 
 
    </div> 
 
    <div id="box"> 
 
    
 
    </div> 
 
    <div id="date"> 
 
    Date 
 
    </div> 
 
</div>

---

更新了bas編上評論

的#wrapper > *規則可以在這種情況下，與上box，我建議有利於給它一個z-index設置position: relative所取代。

---

根據第二評論更新

當你有與組合實現Flexbox /腳本的問題，這裏是一個版本沒有，用相同的標記，並幾乎短CSS

#wrapper { 
 
    position: relative; 
 
} 
 
#wrapper::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; right: 0; 
 
    top: 50%; height: 1px; 
 
    background: gray; 
 
} 
 

 
#author { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#date { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
#box { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: blue; 
 
}

<div id="wrapper"> 
 
    <div id="author"> 
 
    Author 
 
    </div> 
 
    <div id="box"> 
 
    
 
    </div> 
 
    <div id="date"> 
 
    Date 
 
    </div> 
 
</div>

Answer 2

我認爲下面的代碼片段提供了一個框架來做你想做的事情。這使用彈性框來保存三列div（左側，右側和正方形）。通過設置正方形的寬度，flex中的其他兩個元素將填充空間。左右對齊設置在div中的段落元素中設置。

這絕不是一個非常整潔的解決方案，但確實表明它是如何完成的。

.column { 
 
    display: block; 
 
    width: 150px; 
 
} 
 

 
.square { 
 
    display: inline; 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: auto 0; 
 
    background: blue; 
 
} 
 

 
.top { 
 
    display: block; 
 
    height: 50%; 
 
    border-bottom: solid black 2px; 
 
} 
 

 
.bottom { 
 
    display: block; 
 
    height: 50%; 
 
} 
 

 
.banner { 
 
    display: flex; 
 
    padding: 5px; 
 
} 
 

 
p { 
 
    margin: 0; 
 
    line-height: 15px; 
 
    font-size: 0.8em; 
 
} 
 

 
.left-text { 
 
    text-align: left; 
 
} 
 

 
.right-text { 
 
    text-align: right; 
 
}

<div class="banner"> 
 
    <div class="column left"> 
 
    <div class="top left"> 
 
     <p class="left-text"> 
 
     Author 
 
     </p> 
 
    </div> 
 
    <div class="bottom left"> 
 

 
    </div> 
 
    </div> 
 
    <div class="square"> 
 

 
    </div> 
 
    <div class="column right"> 
 
    <div class="top right"> 
 
     <p class="right-text"> 
 
     Month Year 
 
     </p> 
 
    </div> 
 
    <div class="bottom right"> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 3

嘗試這樣的事情。 Fiddle

#line{background: #000; height:1px; margin-top:40px;} 
 
.alignleft { 
 
    float: left; 
 
    text-align:left; 
 
    width:33.33333%; 
 
    
 
} 
 
.aligncenter { 
 
    float: left; 
 
    text-align:center; 
 
    width:33.33333%; 
 
} 
 
.alignright { 
 
    float: left; 
 
    text-align:right; 
 
    width:33.33333%; 
 
    
 
} 
 
.box{background:blue;margin:auto;width:40px;height:40px;display:block;margin-top:-20px;}

<div id="line"> 
 
<p class="alignleft">Author</p> 
 
<div class="aligncenter"><div class="box"> 
 
</div></div> 
 
<p class="alignright">month/year</p> 
 
</div> 
 
<div style="clear: both;"></div>