Question

简单的问题，但我正在努力解决问题。

如何确保标题和日期都与容器底部对齐，同时确保：

标题的长度将推送日期（但不需要换行）
蓝色按钮始终在日期和红色图标之间居中对齐
titleBar容器始终具有相同的固定高度
如果可能的话，需要一个仅限CSS的解决方案 - 如果需要，我已经知道如何使用JS

HTML：

div class="titlebar bgEarth0">
    <h1 id="title">Test Title</h1>
    <h2 id="date">23 October 2013</h2>
    <div class="icon"></div>
    <div class="buttonArea">
        <div class="button"></div>
    </div>
</div>

CSS：

.titlebar { height: 50px; border:1px solid #000}
#title {font-size: 20px; font-weight: normal; float: left;  margin:0}
#date { font-size: 12px; font-weight: normal; float: left; margin-left: 30px;  margin:0 12px}
.buttonArea {position:relative; overflow:auto; height:40px; margin-top:5px}
.button {margin:0 auto; width:60px; height:40px; background:#0000ff}
.icon {float:right; background:#ff0000; height:40px; width:60px; margin-top:5px}

Answer 1

http://jsfiddle.net/hC236/

您可以使用绝对位置。用div包装标题和日期并将其位置设置为绝对值。

HTML：

<div class="titlebar bgEarth0">
    <div class="bleh">
         <h1 id="title">Test Title</h1>
         <h2 id="date">23 October 2013</h2>
    </div>
    <div class="icon">ddd</div>
    <div class="buttonArea">
        <div class="button"></div>
    </div>
</div>

CSS：

.titlebar {
    height: 50px;
    border:1px solid #000;
    position: relative;
}
.bleh {
    position: absolute;
    bottom: 0px;
    left: 0px;
}
#title {
    font-size: 20px;
    font-weight: normal;
    float: left;
    margin:0
}
#date {
    font-size: 12px;
    font-weight: normal;
    float: left;
    margin-left: 30px;
    margin:0 12px
}

.buttonArea {
    position: absolute;
    overflow:auto;
    height:40px;
    top:5px;
    right: 0px;
}

.button {
    margin:0 auto;
    width:60px;
    height:40px;
    background:#0000ff
}

.icon {
    background:#ff0000;
    height:40px;
    width:60px;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

或表示例：

http://jsfiddle.net/hjM56/

HTML：

<div class="titlebar">
  <div class="col-1">
    <h1 id="title">Test Title</h1>
    <h2 id="date">23 October 2013</h2>
  </div>
  <div class="col-2">
    <div class="icon"></div>
  </div>
  <div class="col-3">
    <div class="button"></div>
  </div>
</div>

CSS：

.titlebar {


display: table;
    height: 50px;
    border: 1px solid #000;
    width: 100%;

}

.col-1,
.col-2,
.col-3 { display: table-cell; }

.col-1 {
    white-space: nowrap;
    vertical-align: bottom;
    width: 1%;
}

.col-2 {
    text-align: center;
    width: auto;
}

.col-3 {
    text-align: right;
    width: 1%;
}

#title {
    font-size: 20px;
    font-weight: normal;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

#date {
    font-size: 12px;
    font-weight: normal;
    margin-left: 12px;
    margin-top: 0px;
    margin-right: 12px;
    margin-bottom: 0px;
    display: inline-block;
    padding: 0px;
}

.button {
    width: 60px;
    height: 40px;
    background: #0000ff;
    margin-top: 5;
    display: inline-block;
}

.icon {
    background: #ff0000;
    height: 40px;
    width: 60px;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

Answer 2

这是一种方法，但它涉及一些额外的标记。

我在标题和日期周围添加了一些包装器，如下所示：

<div class="titlebar">
    <div id="titleArea">
        <div id="table-wrap">
        <div id="table-cell">
             <h1 id="title">Test Title</h1>
             <h2 id="date">23 October 2013</h2>
        </div>
        </div>
    </div>
    <div class="icon"></div>
    <div class="buttonArea">
        <div class="button"></div>
    </div>
</div>

应用以下CSS：

.titlebar {
    height: 50px;
    border:1px solid #000
}
#titleArea {
    height:40px;
    margin-top:5px;
    float: left;
}
#table-wrap {
    display: table;
    height: 100%;
}
#table-cell {
    display: table-cell;
    height: 100%;
    vertical-align: bottom;    
}
#title {
    font-size: 20px;
    font-weight: normal;
    padding:0;
    display: inline;
}
#date {
    font-size: 12px;
    font-weight: normal;
    padding-left: 12px;
    display: inline;
}
.buttonArea {
    position:relative;
    overflow:auto;
    height:40px;
    margin-top:5px;
    border: 1px dotted blue;
}
.button {
    margin:0 auto;
    width:60px;
    height:40px;
    background:#0000ff
}
.icon {
    float:right;
    background:#ff0000;
    height:40px;
    width:60px;
    margin-top:5px;
    border: 1px dotted blue; /* for demo only */
}

请参阅演示：http://jsfiddle.net/audetwebdesign/5NDDQ/

我创建了一个外包装#titleArea，它与#buttonArea具有相同的高度和上边距。

在#titleArea内，我创建了一个CSS表/表格单元格（两个嵌套的div），这样我就可以将垂直对齐方式放在底部。

最后，我将display: inline设置为#title和#date。

可能需要调整的细节涉及标题和时间的基线。底部前导使文本略微位于按钮底边上方。

对于看似相对简单的要求似乎做了很多工作。

为了使这更加防弹，我会在.titlebar添加最小宽度，以防止.buttonArea开发水平滚动条和.icon来包装到第二行。

Answer 3

除非必要，否则不应使用浮动。请参阅此JSFiddle Live Demo

基本上，如果您移除浮动和display:inline-block;，它们将对齐。我还删除了overflow:auto，因为这会限制图标区域。

此外，添加left:15%;将对齐日期和红色区域之间的蓝色区域。

编辑：最大宽度规范的示例，用于在标题栏中包含div。 Live Demo

如何将浮动元素对齐到其容器的底部

3 个答案: