Question

有两个div容器：leftcontainer覆盖屏幕的左半部分，rightcontainer覆盖右半部分。两个容器内都是一个高度可变的文本框

.leftcontainer{
    position: relative;
    float:left;
    width:60%;
    height:100%;
}
.rightcontainer{
    position: relative;
    float: right;
    width:40%;
    height:100%;
}
.textbox{
    margin-top: 50%;
    width: 100%;
    background:#333333;
}

<div class="leftcontainer">
    <div class="textbox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
    </div>
</div>
<div class="rightcontainer">
    <div class="textbox">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
    </div>
</div>

我希望文本框水平对齐：两者都应该以50％的高度开始。但是如果我将leftcontainer和rightcontainer的宽度设置为50％，它们只是对齐的如果我做

.leftcontainer{width:60%;}
.rightcontainer{width:40%;}

右侧文本框向上移动。有人能告诉我，如何解决这个问题？谢谢。

Answer 1

如果您使用容器跨越窗口的整个可见高度，那么通过将height和margin-top单位从%切换到{{1}可以轻松完成此操作这是一个代表视口高度的1/100的单位。

vh

http://jsbin.com/ahAfUba/1/edit?html,css,output

如何在50％高度的两个不同宽度的div内对齐内容？

1 个答案: