Question

我正在尝试创建一个2列布局，其中右侧div是固定宽度，其内容始终与左侧div的底部和窗口的右侧对齐。左侧div可以根据窗口的内容和剩余宽度在高度/宽度上增大/缩小。

使用表格布局非常简单：

<table>
    <tr>
        <td class="left">
            <span>Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text</span>
        </td>
        <td class="right">
            <span>Fixed text</span><br/><span>Fixed text</span>
        </td>
    </tr>
</table>

<style>
    table {
        border-collapse: collapse;
    }

    .left {
        background-color: green;
    }

    .right { 
        width: 80px;
        text-align: center; 
        vertical-align: bottom; 
        background-color: red;
    }
</style>

http://jsfiddle.net/gpja56se/

但是我无法通过基于div的布局找到一种方法。这是可能的，还是在这种情况下实际上更适合表格布局？

Answer 1

您可以将display:inline-block用于div，如：

*{
    margin:0;
    padding:0;
}
.main {
    border-collapse: collapse;
}

.left {
    display:inline-block;
    width: 80%;
    background-color: blue;
}

.right { 
   
    text-align: center; 
    vertical-align: bottom; 
    background-color: red;
    display:inline-block;
    width: 20%;
}

<div class="main">
      <div class="left">
          <span>Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text Dynamic text</span>
        </div><div class="right">
          <span>Fixed text</span><br/><span>Fixed text</span>
        </div>
</div>

这样，右侧div内容始终固定在左侧div的底部。

检查Fiddle.

修改

您也可以使用display:table代替display:inline-block;，如：

* { margin: 0; padding: 0; } .main { border-collapse: collapse; display: table; } .left { background-color: blue; display: table-cell; } .right { background-color: red; display: table-cell; text-align: center; vertical-align: bottom; width: 70px; }

检查edited Fiddle.

Answer 2

可以使用CSS完成，但它更复杂，因为您将流体宽度列与固定宽度列混合。请查看本文Ultimate multi-column liquid layouts和此演示The 'Right Menu' 2 column Liquid Layout (Pixel-widths)

Answer 3

这是一个可以使用css flexbox轻松实现的设计： updated fiddle

#container {
    display: flex;
}
.left {
    background-color: green;
}
.right {
    flex-shrink:0;
    flex-basis: 80px;
    text-align: center; 
    background-color: red;
    align-self:flex-end;
}

你仍然需要一个容器，与这个设计的不同之处在于，正确的div不会达到顶部。我不知道这是否重要？

尽量避免使用表格 - 除了真正的表格

HTML / CSS - 右下方对齐的固定宽度div旁边的动态宽度div

3 个答案: