如何将浮动元素与容器底部对齐

Fijjit 发表于 Dev

菲吉特

这个问题很简单，但是我正在努力解决。

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

标题的长度将推过日期（但不需要换行）
蓝色按钮始终在日期和红色图标之间居中对齐
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}

古斯通兹

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;
}