Question

css中是否有一种方法可以对齐3个div（如图所示），其中第一个div向左浮动，并且容器高度=该div高度（+填充），第二个和第三个组合在容器中垂直对齐？

我尝试了this，但不能完全到达那里。

.x {
  width: 100%;
  height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.x> :nth-child(1) {
  display: block;
  float: left;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 1px #333333;
  margin: 4px 16px 4px 4px;
}

.x> :nth-child(2) {
  font-size: 12pt;
}

.x::after {
  content: '';
  width: 100%;
}

.x> :nth-child(3) {
  font-size: 10pt;
  font-weight: 600;
  order: 1;
}

<div class="x">
  <div></div>
  <div>Line 1</div>
  <div>Line 2</div>
</div>

我宁愿从第一个div删除大小设置，并尽可能让它自动发生

Answer 1

您只需要将最后两个div包装在一个容器中即可。

这是有效的解决方案。 https://jsfiddle.net/manoj1234/aqLy97wb/

.x {
  width: 100%;
  height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.x> :nth-child(1) {
  display: block;
  float: left;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 1px #333333;
  margin: 4px 16px 4px 4px;
}

.x> :nth-child(2) {
  font-size: 12pt;
}

.x::after {
  content: '';
  width: 100%;
}

.x> :nth-child(3) {
  font-size: 10pt;
  font-weight: 600;
  order: 1;
}

<div class="x">
  <div></div>

  <div id="col-2-container">
    <div>Line 1</div>
    <div>Line 2</div>
  </div>

</div>

Answer 2

只需将最后两个div包装到另一个div

         Date  Fault_Count  Option1  Option2
0  2020-01-01            0      0.0      0.0
1  2020-01-02            0      0.0      0.0
2  2020-01-03            0      0.0      0.0
3  2020-01-04            2      3.0      3.0
4  2020-01-05            2      0.0      0.0
5  2020-01-06            2      0.0      0.0
6  2020-01-07            4      3.0      3.0
7  2020-01-08            4      0.0      0.0
8  2020-01-09            5      2.0      2.0
9  2020-01-10            5      0.0      0.0
10 2020-01-11            0      2.0     -2.0
11 2020-01-12            1      1.0      1.0

.x {
  width: 100%;
  height: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.x> :nth-child(1) {
  display: block;
  float: left;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 1px #333333;
  margin: 4px 16px 4px 4px;
}

.x> :nth-child(2) {
  font-size: 12pt;
}

.x::after {
  content: '';
  width: 100%;
}

.x> :nth-child(3) {
  font-size: 10pt;
  font-weight: 600;
  order: 1;
}

围绕浮动的div垂直对齐div

2 个答案: