Question

我遇到了一个问题，我的垂直红线未放置在.techDataInfo容器的末端。由于某种原因，它被放置在.techDataInfo img之后。

查看下面的图片。这就是我想要的样子。我也无法使vertical-align: middle为红线工作。

有人看到我在做什么错吗？

.techDataBlock:after {
  content: '';
  display: block;
  width: 80%;
  height: 1px;
  background: #CFCFCF;
  margin: 60px auto;
}

.techDataInfo,
.techDateTableCont {
  display: inline-block;
  vertical-align: top;
  height: auto;
}

.techDataInfo {
  width: 40%;
}

.techDataInfo:after {
  content: '';
  width: 2px;
  height: 300px;
  display: inline-block;
  /*vertical-align: middle;*/
  background: #b82222;
}

.techDataInfo img {
  width: 50%;
  height: auto;
}

.techDateTableCont {
  width: 60%;
}

<div class="techDataBlock">
  <div class="techDataInfo">
    <h2 class="techDataBlockTitle">General Information</h2>
    <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/242ce817-97a3-48fe-9acd-b1bf97930b01/09-posterization-opt.jpg" alt="Img">
  </div>
  <div class="techDateTableCont">
    <table>
      <tr>
        <th>Type</th>
        <th>Measure</th>
      </tr>
      <tr>
        <td>EN AW-Al Mg Si 0.5</td>
        <td>EMaterial Designation DIN EN 573</td>
      </tr>
      <tr>
        <td>Tensile strength RM</td>
        <td>min. 245 N/mm²</td>
      </tr>
      <tr>
        <td>Yield Point Rp 0.2</td>
        <td>min. 195 N/mm²</td>
      </tr>
      <tr>
        <td>Ductile yield A5</td>
        <td>min. 10%</td>
      </tr>
      <tr>
        <td>Ductile yield A10</td>
        <td>min. 8%</td>
      </tr>
      <tr>
        <td>Moulus of elasticity E</td>
        <td>70.000 N/mm²</td>
      </tr>
      <tr>
        <td>Hardness HB</td>
        <td>approx. 75 Brinell hardness</td>
      </tr>
      <tr>
        <td>Coefficient of Linear expansion</td>
        <td>23.4 x 10⁻⁶ 1/K</td>
      </tr>
    </table>
  </div>
</div>

Answer 1

我认为使用flexbox属性display:flex是一个好地方，如果行中没有足够的空间，flex-wrap: wrap会将元素换行。

它使您可以将中心的项目与align-items:center对齐，也可以使用不同的条件justify-content: space-around|space-between将其分开

.techDataBlock:after {
  content: '';
  display: block;
  width: 80%;
  height: 1px;
  background: #CFCFCF;
  margin: 60px auto;
}

.techDataInfo,
.techDateTableCont {
  display: inline-block;
  vertical-align: top;
  height: auto;
}

.techDataInfo {
  width: 40%;
}

.techDataInfo:after {
  content: '';
  width: 2px;
  height: 300px;
  display: inline-block;
  /*vertical-align: middle;*/
  background: #b82222;
}

.techDataInfo img {
  width: 50%;
  height: auto;
}

.techDateTableCont {
  width: 60%;
}

.techDataInfo{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 align-items: center;
}

<div class="techDataBlock">
  <div class="techDataInfo">
    <h2 class="techDataBlockTitle">General Information</h2>
    <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/242ce817-97a3-48fe-9acd-b1bf97930b01/09-posterization-opt.jpg" alt="Img">
  </div>
  <div class="techDateTableCont">
    <table>
      <tr>
        <th>Type</th>
        <th>Measure</th>
      </tr>
      <tr>
        <td>EN AW-Al Mg Si 0.5</td>
        <td>EMaterial Designation DIN EN 573</td>
      </tr>
      <tr>
        <td>Tensile strength RM</td>
        <td>min. 245 N/mm²</td>
      </tr>
      <tr>
        <td>Yield Point Rp 0.2</td>
        <td>min. 195 N/mm²</td>
      </tr>
      <tr>
        <td>Ductile yield A5</td>
        <td>min. 10%</td>
      </tr>
      <tr>
        <td>Ductile yield A10</td>
        <td>min. 8%</td>
      </tr>
      <tr>
        <td>Moulus of elasticity E</td>
        <td>70.000 N/mm²</td>
      </tr>
      <tr>
        <td>Hardness HB</td>
        <td>approx. 75 Brinell hardness</td>
      </tr>
      <tr>
        <td>Coefficient of Linear expansion</td>
        <td>23.4 x 10⁻⁶ 1/K</td>
      </tr>
    </table>
  </div>
</div>

Answer 2

尝试一下

.techDataBlock:after {
  content: '';
  display: block;
  width: 80%;
  height: 1px;
  background: #CFCFCF;
  margin: 60px auto;
}

.techDataInfo,
.techDateTableCont {
  display: inline-block;
  vertical-align: top;
  height: auto;
}

.techDataInfo {
  width: 40%;
 justify-content: space-between;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
}

.techDataInfo:after {
  content: '';
  width: 2px;
  height: 300px;
  display: inline-block;
  /*vertical-align: middle;*/
  background: #b82222;
 
}

.techDataInfo img {
  width: 50%;
  height: auto;
}

.techDateTableCont {
  width: 60%;
}

<div class="techDataBlock">
  <div class="techDataInfo">
    <h2 class="techDataBlockTitle">General Information</h2>
    <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/242ce817-97a3-48fe-9acd-b1bf97930b01/09-posterization-opt.jpg" alt="Img">
  </div>
  <div class="techDateTableCont">
    <table>
      <tr>
        <th>Type</th>
        <th>Measure</th>
      </tr>
      <tr>
        <td>EN AW-Al Mg Si 0.5</td>
        <td>EMaterial Designation DIN EN 573</td>
      </tr>
      <tr>
        <td>Tensile strength RM</td>
        <td>min. 245 N/mm²</td>
      </tr>
      <tr>
        <td>Yield Point Rp 0.2</td>
        <td>min. 195 N/mm²</td>
      </tr>
      <tr>
        <td>Ductile yield A5</td>
        <td>min. 10%</td>
      </tr>
      <tr>
        <td>Ductile yield A10</td>
        <td>min. 8%</td>
      </tr>
      <tr>
        <td>Moulus of elasticity E</td>
        <td>70.000 N/mm²</td>
      </tr>
      <tr>
        <td>Hardness HB</td>
        <td>approx. 75 Brinell hardness</td>
      </tr>
      <tr>
        <td>Coefficient of Linear expansion</td>
        <td>23.4 x 10⁻⁶ 1/K</td>
      </tr>
    </table>
  </div>
</div>

：after元素不显示在元素之后

2 个答案: