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

OR テーブルの例:

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 に答える
0

必要でない限り、フローティングを使用しないでください。この JSFiddle を参照してくださいLive Demo

基本的に、フロートを削除すると、display:inline-block;代わりに整列します。overflow:autoアイコン領域が制限されるため、も削除しました。

また、追加left:15%;すると、日付と赤い領域の間に青い領域が配置されます。

編集:タイトル バー内の div を含む max-width 指定の例。Live Demo

于 2013-11-01T14:12:48.040 に答える