2

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

Jsfiddle 在这里。

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

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

3 回答 3

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;
}
于 2013-11-01T14:30:24.290 回答
1

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

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

<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为#titleand #date。

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

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

为了使这更防弹，我会在 中添加一个 min-width 以.titlebar防止.buttonArea发展水平滚动条和.icon换行到第二行。

于 2013-11-01T14:50:29.597 回答
0

除非必要，否则不应使用浮动。看到这个 JSFiddleLive Demo

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

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

编辑：带有最大宽度规范的示例以包含标题栏中的 div。Live Demo

于 2013-11-01T14:12:48.040 回答