浮动表格单元格右侧删除高度答案

【问题标题】：Floating table-cell right removes height浮动表格单元格右侧删除高度
【发布时间】：2017-01-21 02:11:48
【问题描述】：

|information||two lines|
|informatino||two lines|

问题在于，当我将那个 div 向右浮动.verticalLine

这是显示问题的 jsfiddle https://jsfiddle.net/fh6unb7q/

.side {
  width: 45%;
}
.verticalLine:before {
  content: "";
  display: block;
  position: absolute;
  border-left: 0.13em solid #90A4AE;
  border-right: 0.13em solid #90A4AE;
  height: 100%;
  width: 16%;
  margin-left: 42%;
  box-sizing: border-box;
}
.verticalLine {
  position: relative;
  width: 10%;
}
.tr {
  display: table-row;
}
.tc {
  display: table-cell;
}
.year {
  text-align: center;
  color: #607D8B;
}
/* Media Queries */

@media only screen and (max-width: 768px) {
  header h1 {
    font-size: 3rem;
  }
  .tr > div.side {
    display: none;
  }
  .tr > div.verticalLine {
    float: right;
  }
  .tr > div.year {
    float: right;
  }
  .tr > a {
    float: left;
  }
  .side {
    width: 90%;
  }
}

<div style="display: table;">
  <div class="tr">
    <a class="tc side" target="_blank" href="#">
      <h3>test test test test test test test test test test test test test </h3>
    </a>
    <div class="tc verticalLine">
    </div>
    <div class="tc side"></div>
  </div>

  <div class="tr">
    <div class="tc side"></div>
    <div class="tc verticalLine">
    </div>
    <a class="tc side" target="_blank" href="#">
      <h3>test test test test test test test test test test test test test </h3>
    </a>
  </div>

</div>

编辑：使用 flex 更新代码 - https://jsfiddle.net/fh6unb7q/1/ HTML：

<div style="display: flex;">
    <a class="side" target="_blank" href="#">
      <h3>test test test test test test test test test test test test test </h3>
    </a>
    <div class="verticalLine">
    </div>
    <div class="side"></div>
</div>

<div style="display:flex">
    <div class="side"></div>
    <div class="verticalLine">
    </div>
    <a class="side" target="_blank" href="#">
      <h3>test test test test test test test test test test test test test </h3>
    </a>
</div>

CSS：

.side {
  width: 45%;
}

.verticalLine:before {
  content: "";
  display: block;
  position: absolute;
  border-left: 0.13em solid #90A4AE;
  border-right: 0.13em solid #90A4AE;
  height: 100%;
  width: 16%;
  margin-left: 42%;
  box-sizing: border-box;
}

.verticalLine {
  position: relative;
  width: 10%;
}



/* Media Queries */

@media only screen and (max-width: 768px) {
  div.side {
    display: none;
  }
  div.verticalLine {
    float: right;
  }

  a {
    float: left;
  }
  .side {
    width: 90%;
  }
}

你可以看到它仍然没有正确对齐，虽然||在执行媒体查询后仍然可见。

我希望它像这样对齐

|information||two lines|
|informatino||two lines|

【问题讨论】：

你能解释一下你想用这个布局完成什么吗？您对其他布局技术持开放态度吗？
@Michael_B 是的，我对其他技术持开放态度，这似乎是最简单的。出于设计目的，我想要 |text| |装饰| |空| |空| |装饰| |正文|但是当分辨率较小时，保留空白部分是没有意义的，这就是为什么我将显示设置为非空 div 并且我希望它们对齐所以 |text| |装饰| |正文| |装饰|而不是 |文本| |装饰| |装饰| |文本|
您可能需要考虑flexbox solution，它会为您提供比表格和浮动更多的布局选项和灵活性。
@Michael_B 是对的，但是为什么你使用带有 display:table 的 div 而不是直接使用表格呢？
@legomolina 如果我需要从表格单元格更改为块显示等，它只允许我更改表格的行为方式。

标签： html css media-queries

【解决方案1】：

像这样：？

https://jsfiddle.net/uce9hp9n/

然后只需将flex-direction: row-reverse; 添加到第二行容器中。

评论中的问题后添加/编辑：

使用 flex 解决方案，您可以为每个行容器分配相同的类并为该类创建 CSS 规则。然后像这样创建另一个规则：

.my_row { 
  display:flex; 
}
.my_row:nth-child(even): { 
  flex-direction:row; 
}

这将每隔一行反转一次。

【讨论】：

有没有更通用的解决方案？由于行是交替的，所以它总是 |info| |装饰| |装饰| |信息|等等。它对浮动很有意义，因为我可以向左加载信息并向右加载装饰，所以它总是可以工作的。
请注意我的回答中的补充