レイアウトパズル：左揃え、右揃え、中央揃えボックスすべて直線に接続

Question

私はこのレイアウトパズルを解決しようとしていますが、エレガントで清潔で時を超えた方法でそれを手に入れようとしています。

考える：
- 左揃えテキストボックス - - と右揃えテキストの行
上horitontally中心垂直ならびにボックス -
容器の内部に延伸する1つの画素の高さの水平線ボックス

私が試したことは、いくつかの種類の中間に達するまで、ペースを増やすことです...警告、免責事項、次のコードは非常にグラフィカルで醜いです！

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> 

私は最初、これはしかしjustify-content: space-betweenを使用して、フレキシボックスに解決されるかもしれないと思った、私が作る方法を見つけ出すことはできませんそこに線が現れる。だから、私は良い古い場所/フロートやフレックスボックスを提案するためにオープンしています。多分それを両方の方法で解決しようとすると、どれが最もエレガントであるかを見てみるといいでしょうか？前もって感謝します！

ここ

Answer 1

一のあなたがauthor/box/dateを整列させるためにjustify-content: space-betweenを使用することを達成する方法、及び

#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 > *ルールにエドは、この場合には、私はそれをz-indexを与えることに賛成してお勧めしますbox、上position: relativeの設定に置き換えることができます。

---

コンボフレキシボックス/スクリプトの問題を持っているとして、ここでは1と同じマークアップなしのバージョン、およびほぼ同じ短い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

以下のスニペットは、あなたがしたいことをするためのフレームワークを提供すると思います。これはフレックスボックスを使用して3列のdiv（左、右、および正方形）を保持します。正方形の幅を設定することで、フレックスの他の2つの要素がスペースを埋めるようになります。左揃えと右揃えの設定は、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>