Question

我有一个包含两个div，它们形成两个“列”，类名为context_left和context_right。左侧列div的高度大于右侧列的高度。左栏的宽度为30％，右栏的宽度为45％。右列div是右浮动的。如果我移除右浮动或降低宽度，右侧div列将消失。

父级没有定义的高度。如何让右手相对于父高度垂直对齐？

HTML代码：

<section>
        <div class="content context_left">
              <p>Lorem Ipsum (This is actually a long paragraph)</p>
              <p>Lorem Ipsum (So is this one) </p>
              <p style="padding: 5%;">
                        <b>Foo Bar</b>
                    </p>
                    <p>
                        Lorem Ipsum (long paragraph 3)
                    </p>
                </div>
                <div class="context_right">
                    <img src="foo.svg" alt="bar" id="logo">
                </div>
            </section>

CSS代码：

section {
overflow: hidden;
}

.context_left{
    display: inline-block;
    width: 30%;
    margin-left: 10%;
    overflow: hidden;
    float: left;
    text-align: left;
    vertical-align: middle;
    font-family: 'Lato';
    font-weight: 300;
    font-size: medium;
} 

.context_right{
    display: inline-block;
    height: 300px;
    float: right;
    line-height: 300px;
    width: 45%;
    padding-right: 10%;
}  /* This is the one I'm trying to vertically align relative to <section> */

我尝试了什么：

- 将父级显示为表，子级显示为表格单元格，并将vertical-align设置为中间 - 使用vertical-align将父级和子级显示设置为内联表 - 尝试使用display：flex在父级上创建一个我可以垂直对齐的弹性框 - 定义父级的高度，以便我可以使用vertical-align（无所谓，不起作用） - 改变字体大小 - 将位置设置为绝对（可怕的重叠元素）

我无法使用绝对定位或额外填充，因为它在移动设备上看起来很糟糕。另外，使用top：50％似乎推动它超过左侧列高度定义的高度的一半，因此它不是可扩展的相对选项。什么是S.O.建议？

Answer 1

你的意思是这样的：

＆＃13;

section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

section>div {
  border: 1px solid;
}

section>div:nth-child(1) {
  -webkit-box-flex: 0.3;
  -ms-flex: 0.3;
  flex: 0.3;
}

section>div:nth-child(2) {
  -webkit-box-flex: 0.45;
  -ms-flex: 0.45;
  flex: 0.45;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}


/* This is the one I'm trying to vertically align relative to <section> */

＆＃13;

<section>
  <div class="content context_left">
    <p>Lorem Ipsum (This is actually a long paragraph)</p>
    <p>Lorem Ipsum (So is this one) </p>
    <p>
      <b>Foo Bar</b>
    </p>
    <p>
      Lorem Ipsum (long paragraph 3)
    </p>
  </div>
  <div class="context_right">
    <img src="foo.svg" alt="bar" id="logo">
  </div>
</section>

＆＃13;

父<section>中的两个<div>“列”，试图将右手div相对于父级垂直居中。

1 个答案: