布局难题：左对齐和右对齐加上一个居中的框全部用一条线连接

Question

我正在尝试解决这个布局难题，但一直无法解决如何让它优雅、干净和永恒的问题。

鉴于：
- 一条 1 像素高的水平线在其 in
容器内延伸 - 这条线上垂直和水平居中的框
- 一个左对齐的文本框 - 和一个右对齐的文本框

我尝试过的是不断增加百分比，直到我达到某种中间值...警告，免责声明，以下代码非常图形化且丑陋！

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 但是，我不知道如何使该行出现在那里。所以我愿意接受任何建议，无论是旧的 positioning/float 还是 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>

根据评论更新

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

根据第二条评论更新

由于您对组合 Flexbox/script 有疑问，这里是一个没有的版本，具有相同的标记和几乎一样短的 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中的其他两个元素将填充space。左右对齐设置在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>

布局难题：左对齐和右对齐加上一个居中的框全部用一条线连接

Layout puzzle: align to Left AND Right plus a Centered box All connected with a Line

css

layout

flexbox

alignment

positioning