Question

我花了几个小时试图找到底线，也许其他人可以提供帮助。

我正在尝试构建一个包含左侧可变高度徽标和右侧两个块的标题，使得上部块与徽标顶部对齐，下部块与底部对齐标志。我想避免使用TABLE，原因很明显。可以假设徽标高度比两个右侧块更长。

我最初的尝试是使用display:table等。这可以在这里看到：

<header>
    <div class="c1">Logo Here<br />aaaaaaaaa<br />aaaaaaaaa<br />
aaaaaaaaa<br />aaaaaaaaa<br />aaaaaaaaa</div>
    <div class="c2">
        <div class="r1">Upper Block (top align)</div>
        <div class="r2">Lower Block (bottom align)</div>
    </div>
</header>

CSS：

header, div { border: solid 1px red; }
div.c1 { background-color: #FDF; }
div.c2 { background-color: #FFD; }
div.r1 { background-color: #DFF; }
div.r2 { background-color: #DFD; }
header {
    display:table;
    table-layout:fixed;
    width: 100%;
}
header > div {
    display:table-cell;
}
.c1 { width: 70%; rowspan:2; }
.c2 { width: 30%; }

小提琴：http://jsfiddle.net/BloodBaz/ytubnaoc 这无法将较低的[绿色]块（和内容）推到[黄色]容器的底部。

我考虑过使用＆＃34; grid layout＆＃34;但是浏览器支持很少（IE10 +截至2015-01-27）。

我还玩过＃34; flex layout＆＃34; （两个嵌套布局 - 一个水平布局，一个垂直布局），但无法使其工作：

<header>
    <div class="c1">Logo Here<br />aaaaaaaaa<br />aaaaaaaaa<br />aaaaaaaaa
        <br />aaaaaaaaa<br />aaaaaaaaa</div>
    <div class="c2">
        <div class="r1">bbbbbbbbb</div>
        <div class="r2">ccccccccc</div>
    </div>
</header>

CSS：

header, div { border:solid 1px blue; }
div.c1 { background-color: #FCC; }
div.c2 { background-color: #CFC; }
div.r1 { background-color: #CCF; }
div.r2 { background-color: #FFC; }

header
{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
}
header > div { width: 50%; }
/*header > div > div { height: 50%; }  doesn't work */
.c2
{
    display: flex;
    flex-flow: column nowrap;
    /*align-items: stretch;  doesn't work */
}
.r2
{
    text-align:right;
   /* vertical-align:bottom; doesn't work */
   /* align-self:flex-end;  doesn't work */
}

JSFiddle：http://jsfiddle.net/BloodBaz/qmz4qcs1

有人可以建议我如何在不使用TABLE / TR / TD标签的情况下做到这一点吗？

谢谢，克里斯

Answer 1

您可以使用position：absolute来底部对齐绿色div

＆＃13;

div {
    border: solid 1px red;
}
div.h1 {
    background-color: #FDF;
}
div.h2 {
    background-color: #FFD;
    position:relative;
}
div.h3 {
    background-color: #DFF;
    text-align:right;
}
div.h4 {
    background-color: #DFD;
    text-align:right;
    position:absolute;
    bottom:0;
    width:100%;
}
div#header {
    display:table;
    width: 100%;
}
div#header > div {
    display:table-cell;
}
div.h1 {
    width: 70%;
}
div.h2 {
    width: 30%;
}

＆＃13;

<div id="header">
    <div class="h1">aaaaaaaaa
        <br />aaaaaaaaa
        <br />aaaaaaaaa
        <br />aaaaaaaaa
        <br />aaaaaaaaa
        <br />aaaaaaaaa</div>
    <div class="h2">
        <div class="h3">bbbbbbbbb</div>
        <div class="h4">ccccccccc</div>
    </div>
</div>

＆＃13;

演示http://jsfiddle.net/shedali/3sur4ksa/

包含顶部和底部对齐内容的标题

1 个答案: