布局拼图：对齐左，右和中心框全部用线连接

Question

我正在尝试解决这个布局难题，但我却陷入了如何让它变得优雅，干净和永恒。

鉴于

：
- 在容器内部拉伸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>

我首先想到这可以在flexbox中解决，使用justify-content: space-between然而，我无法弄清楚如何使线条出现在那里。因此，我对任何有关它的好旧定位/浮动或使用flexbox的建议持开放态度。也许尝试两种方式解决它并看看哪一个最优雅会很好？提前谢谢！

Answer 1

以下是实现此目的的一种方法，您可以使用justify-content: space-between来对齐author / box / date和绝对定位的伪元素来绘制线< / p>

#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>

根据评论更新

在这种情况下，#wrapper > *规则可以替换为position: relative上的设置box，我建议将其设为z-index。

根据第二条评论更新

由于您遇到组合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中的段落元素中设置。

这绝不是一个非常整洁的解决方案，但确实展示了如何做到这一点。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试这样的事情。 Fiddle

＆＃13;

＆＃13;

#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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;