2

2つのdivを1行に配置しようとしていますが、それを実行すると、メインコンテナの高さが正しく調整されません。

<div class="container">
    <div class="info">Text</div>
    <div class="controls">
        <button value="Accept">Accept</button>
        <button value="Decline">Decline</button>
    </div>
</div>

CSS：

.container{
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border:1px solid #800000;

margin: 8px;
height:auto;
}

.info{
display: inline-block;
vertical-align: middle;
text-align: center;
}

.controls{
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
width: 130px;
padding: 8px;
border-left: 1px solid #000;
background-color: #D4D0C8;
float: right;
}

button{
width:100%; // what ever you want it to be
}

jsfiddle

コンテナの高さを修正するにはどうすればよいですか？

4

3 に答える 3

1

これは、フロートベースのレイアウトでよくある問題です。コンテナは、フロートされた子の高さに対応するために伸びません。この問題には2つの簡単な解決策があります。

  • にdivを追加しますclear:both（AliRizaが別の回答で推奨しているように）。
  • overflow:autoコンテナに追加します。

後者の方法を使用することをお勧めします。これは、表示のためだけにHTML要素を追加する必要がないためです。詳細については、こちらをご覧ください。

これは次のように実装できます。

.container {
    overflow:auto;
}

JSフィドルの例

于 2013-02-17T17:27:33.210 に答える
0

<div style="clear:both;"></div>コンテナdivの最後に追加

<div class="container">
    <div class="info">Text</div>
    <div class="controls">
        <button value="Accept">Accept</button>
        <button value="Decline">Decline</button>
    </div>
    <div style="clear:both;"></div>
</div>

編集されたデモ

于 2013-02-17T17:24:45.277 に答える
0

css

<style>
div{
width:100px;
height:100px;
display:inline-block;
border:1px solid #ccc;
vertical-align:top;
}
</style>

html

<div>your div 1</div>
<div>Your div 2</div>

縦に揃えるのは、下がるときにテキストや画像の量を変えても、一番上に保つことですlol

于 2013-02-17T19:47:07.353 に答える