0

フローティング div に、親 div を埋める高さを持たせようとしています。

http://jsfiddle.net/sergep/2qPZ2/1/

構造は次のとおりです。

Parent div______________________
|    Middle child
|    Left child - float:left
|    Right child - float:right

問題は、左の子のテキストが右の子よりも少ないことです。つまり、右の子は (div に合わせて) 親 div の高さを増やしますが、左のフローティング div は従いません。

css は次のようになります。

.bottomcontainer {
  bottom: 0;
  position: absolute;
  width: 100%;
  height: auto;
}

.bottomleft {
  background: #346CA5;
  float:left;
  width: 50%;
}


.middle {
  background: #FFCE3C;
}

.bottomright {
  background: #65B237;
  float:right;
  width: 50%;
}

.bottomleft青いクラスを の一番下に貼り付けるにはどうすればよい.bottomcontainerですか? - レスポンシブにしようとしているので、実際のピクセル サイズは使用したくありません。

したがって、テキストを垂直方向に中央揃えにするにはどうすればよいですか?

4

2 に答える 2

2

display:table-cell;子 div で使用します。外挿できる例については、こちらを参照してください

于 2013-11-13T11:23:55.580 に答える
1

私は質問を誤解しました。これを修正するには、余分な div を追加して、.bottomleftそれ.bottomrightを table / tablecells として表示します。

HTML:

<div id="nav"></div>
<div id="container">
    <div class="bottomcontainer">
        <div class="middle">
            <h2>Intro tag line here</h2>
        </div>
        <div class="bottom">
            <div class="bottomleft">
                <h2>Tag line here</h2>
            </div>
            <div class="bottomright">
                <h2>Longer tag line goes here</h2>
            </div>
        </div>
    </div>
</div>
<div name="content" id="content"></div>

CSS:

.bottom {
    display: table;
}
.bottomleft {
    display: table-cell;
    background: #346CA5;
    opacity: 1.0;
    width: 50%;
    vertical-align: middle;
}
.bottomright {
    display: table-cell;
    background: #65B237;
    opacity: 1.0;
    width: 50%;
}

そして更新されたFiddle 2

float を削除し、絶対位置を追加します。

.bottomleft {
    background: #346CA5;
    opacity: 1.0;
    position: absolute;
    bottom: 0;
    width: 50%;
    vertical-align: middle;
}

更新された Fiddleも確認してください。

于 2013-11-13T11:27:11.770 に答える