3

に ajax されたデータがあります<div class="content">。外側の div を内側の div の高さまで拡張したい。これを行う方法がわかりません。

HTML:

<div class="outer">
    <div class="inner">
        <div class="content">Stuff goes here</div>
    </div>
</div>

CSS:

.outer {
    width: 740px;
    min-height: 250px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 10px;
}

.inner {
    position: absolute;
    top: 70px;
    left: 10px;
    width: 335px;
    bottom: 0;
}

.content {
    font-size: 13px;
    margin: 0 0 7px 0;
    text-align: left;
    position: relative;
}

外側の div を、内側にあるものの高さまで拡大したい<div class="content"></div>。これどうやってするの？

4

3 に答える 3

5

これは、CSS で POSITION を使用すると発生します。INNER クラスから POSITION を削除すると、OUTER div が正しく展開されます。おそらく、マージンを使用して内側の div を配置できます。

編集：

可能な代替 CSS を次に示します。要件に適している場合とそうでない場合があります。

.outer {
    width: 740px;
    min-height: 250px;
    margin: 0 auto;
    position: relative;
    padding-top:70px;
    padding-left:10px;
    margin-bottom: 10px;
}

.inner {
    width: 335px;
    bottom: 0;
}

.content {
    font-size: 13px;
    margin: 0 0 7px 0;
    text-align: left;
    position: relative;
}
于 2012-11-23T01:34:07.070 に答える
1

内側の div の position:absolute が主な問題です。以下は位置を削除した例です。nbsp を追加する必要があることに注意してください。表示する外側の div に。

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

.outer {
    width: 740px;
    margin: 0 auto 10px auto;
    background:#F90;
}

.inner {
    margin:70px 0 0 10px;
    width: 335px;
    bottom: 0;
    background:#9FF;
}

.content {
    display:block;
    font-size: 13px;
    margin: 0 0 7px 0;
    text-align: left;
    background:#CCC;
}
</style>
</head>

<body>
    <div class="outer">&nbsp;
        <div class="inner">
            <div class="content">Stuff goes here. </div>
        </div>
    </div>
</body>
</html>
于 2012-11-23T01:42:46.813 に答える
0

JavaScript を使用して外側の div のサイズを変更できます。これを AJAX リクエストのコールバックに入れます。

    var $inner = $('.inner');
    var height = parseInt($inner.height()) + parseInt($inner.css('top'));  
    $('.outer').css('height', height);

jQueryを使用すると仮定すると、つまり...

于 2012-11-23T01:49:23.893 に答える