Question

我们如何将另外两个部分旁边的2个部分对齐，这两个部分的高度与其他两个部分相同，不使用浮点数？

更新我的HTML看起来像这样：

    <div class="header-main">
    <div class="header-left">
    </div>
    <div class="header-right">
        <div class="cont-top">
            <div class="header-top-left">
            </div>
            <div class="header-top-right">
            </div>
        </div>
       <div class="header-bottom">
       </div>
    </div>
</div>

像这样的CSS：

div.header-left
{
    width:160px;
    height:182px;
    display:inline-block;
}

div.header-right
{
    width:730px;
    height:182px;
    display:inline-block;
    vertical-align:top;
}

div.header-top
{
    width:730px;
    height:125px;
}

div.header-top-left
{
    width:340px;
    height:123px;
    display:inline-block;
    vertical-align:top;
}

div.header-top-right
{
    display:inline-block;
    width:380px;
    height:123px;
    vertical-align:top;
    text-align:right;
}

div.header-bottom
{
    width:730px;
    height:40px;
}

现在似乎工作正常。就个人而言，我认为这种方式比使用float更容易控制元素。

任何评论都表示赞赏。我希望它可能对某人有用:)。

Answer 1

这是您尝试的布局吗？

### ###
#1# ###
### ###
    #3#
### ###
#2# ###
### ###

如果是这样，你可以使用flexbox或使用inus-block，就像Tushar提到的那样......但请考虑一下移动设备的外观。

将部分彼此对齐

1 个答案: