html - HTML div、コンテンツをラップする方法は？

Question

私はこの画像に3つのdivのようなものがあります：

ここに画像の説明を入力してください

div1の幅は固定されていますが、高さは可変です。したがって、div1の高さがdiv2の高さよりも大きい場合、div3はdiv2の下にあり、div1の右側にあります。

ここに画像の説明を入力してください

これを行う方法について何かアイデアはありますか？今のところ、私はコンテナを作成しました：

<div class="colcontainer">
    <div class="col-left">
    {% block news %}{% endblock %}
    </div>  
    <div id="main_content">
        <div class="col-right">
            {% block rightcol %}{% endblock %}
        </div> 
        <div id="content">
            <div class="contentwrap">
                <div class="itemwrap">
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>

    <div class="content-bottom"><div class="content-bottom-left"></div></div>
    </div>
</div>

私のCSSは次のようなものです：

.col-left {
    float:left;
    padding:0;
    margin:0;
    width: 300px;
    min-height:198px;
}

.col-right {
    text-align:left;
    padding:0;
    margin:0 0 0 200px;
}

#content {
    background: none repeat scroll 0 0 #FFFFFF;
    float: left;
    margin-top: 10px;
    padding: 10px;
    width: 980px;
}

これがJSFiddleのデモです

score 6 · Accepted Answer

ついに、私はそれを手に入れました:)以下に示すように、これら3つの要素すべてを親要素でラップするだけです。

HTML

<div class="main">
   <div class="div1"></div>  <!-- Change height to see result -->
   <div class="div2"></div>
   <div class="div3"></div>
</div>

CSS

.main{width:200px;height:200px;border:1px solid black;overflow:hidden;}
.div1{width:100px;min-height:100px;float:left;background-color:green;}
.div2{width:100px;display:inline-block;height:100px;background-color:blue;}
.div3{width:100px;display:inline-block;height:100px;background-color:red;margin-top:-4px;}

ワーキングフィドル

3番目のdivの幅をそれ自体よりも広くしたい場合は、jQueryを使用することを強くお勧めします。

.div3{width:200px;}  /* Keeping width wide enough with the container */

jQuery

$(function(){
    if($('.div1').height() > 100)
       $('.div3').width(100)
});

ワーキングフィドル

score 4 · Accepted Answer

CSSはまだそのジョブに何も提供していないため、Javascriptを使用する必要があります。

まず、最初の写真のようなページを作成します。それなら私は

$("#div").height()

、これはdivの高さを返し、これを2番目のdivの高さと比較します。

if($("#div1").height() > $("div2").height())
  //change website...

ifボディに必要なcssの変更を入れてください...それでうまくいくはずです。

score 4 · Accepted Answer

このようにスタイリングすれば#content機能します。

#content {
    background: #fbb;
    padding: 10px;
}

フロートがないことに注意してください。

jsFiddle： http: //jsfiddle.net/JRbFy/1/

左の高さが等しいjsFiddle-列とコンテンツ効果：http：//jsfiddle.net/JRbFy/2/

score 2 · Accepted Answer

これはあなたのために働くはずです、少なくともあなたを正しい方向に向けます。

CSS：

.box {border:1px dashed black;}
#content {width:1000px;}
#clear {clear:both;}

#left {float:left; width:200px; height:100px; margin-right:15px;}
#top {float:left; width:780px; height:200px;}
#main {float:left; min-width:780px; max-width:1000px;}

HTML：

<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>

<div class="box" id="content">
<div class="box" id="left">Left</div>
<div class="box" id="top">Top</div>
<div class="box" id="main">Main</div>
<div id="clear"></div>
</div>

</body>
</html>

score 2 · Accepted Answer

私が正しく理解していれば、あなたはこのようなものが欲しいですか？

<style>
    #container1
    {
        width: 100%;
    }

    #left
    {
        width: 30%;
        background: #123456;
        float: left;
        height: 50%;
    }
    #right
    {
        width: 70%;
        float: left;
        height: 50%;
    }
    #right_top
    {
        background: #111111;
        height: 30%;
    }
    #right_bottom
    {
        background: #777777;
        height: 70%;
    }
</style>

<div id="container1">
    <div id="left">Div 1</div>
    <div id="right">
        <div id="right_top">Div 2</div>
        <div id="right_bottom">Div 3</div>
    </div>
</div>

score 2 · Accepted Answer

そして最後に私の解決策もあります:)

デモ： http： //jsfiddle.net/JRbFy/3/

を使用しmargin: 10px auto;て、：content divから取り出します。main_content div

HTML

<div class="colcontainer">
    <div class="col-left">
    {% block news %}{% endblock %}
        <br/>
        <b>Hover on me to increase my height </b>
    </div>  
    <div id="main_content">
        <div class="col-right">
            {% block rightcol %}{% endblock %}
        </div> 
    </div>
    <div id="content">
        <div class="contentwrap">
            <div class="itemwrap">
                {% block content %}{% endblock %}
            </div>
        </div>


    <div class="content-bottom"><div class="content-bottom-left"></div></div>
    </div>
</div>

CSS

.colcontainer{
    width: auto;
}

.col-left {
    background: none repeat scroll 0 0 silver;
    float:left;
    padding:0;
    margin:0;
    width: 300px;
    min-height:198px;
}

.col-left:hover{    
    height: 300px;
}

.col-right {
    background: none repeat scroll 0 0 steelblue;
    text-align:left;
    padding:0;
    margin:0 0 0 200px;
    height:198px;
}

#content {
    background: none repeat scroll 0 0 yellowgreen;    
    margin: 10px auto;
    padding: 10px;
}

お役に立てば幸い

score 0 · Accepted Answer

みんながjQueryをluuuuuuurvesしているのを見て、私はあなたが求めたことを実際に実行する何かを一緒に投げることに決めました。楽しむ：）

<div id="div1">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>
<div id="div2">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>
<div id="div3">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>
<div id="div4">
    <p>Test</p>
    <p>Test</p>
    <p>Test</p>
</div>

いくつかのCSSをスローイン

#div1, #div2, #div3, #div4 {
    border:3px double #000;
    background:#fff
}
#div1 {
    width:200px;
    float:left;
}
#div4 {
    clear:both;
}

そして最後にあなたのjQuery。

$(function () {
    $('#div2').css({
        marginLeft: $('#div1').outerWidth()
    });
    if ($('#div2').height() < $('#div1').height()) {
        $('#div3').css({
            marginLeft: $('#div1').outerWidth()
        });
    }
});

今。私はこの方法を支持しているのではなく、あなたが求めていたものを実際に達成したと言っているだけですが、ここでは他に何もありません;）

このjsFiddleでご覧ください。div1にもう1つ<p>テスト</p>を追加するだけで、画像に従ってdiv3がdiv1の右側に移動することがわかります。

さて、誰かが「しかし、div1はその時すべての高さをとらない！」と言うことを私は知っています、よく恐れないでください。更新されたjsFiddleをJavaScriptに1つ追加してチェックし、質問への回答も確認してください。div1から<p>テスト</p>の1つを削除するだけです。

$(function () {
    $('#div2').css({
        marginLeft: $('#div1').outerWidth()
    });
    if ($('#div2').height() < $('#div1').height()) {
        $('#div3').css({
            marginLeft: $('#div1').outerWidth()
        });
        $('#div1').css({
            height: $('#div2').outerHeight() + $('#div3').height()
        });
    }
});

このソリューションはJavascriptに依存していることを繰り返し述べなければなりません。オフにすると、デバイスはそれをサポートしません。これは動作を停止します。

score 0 · Accepted Answer

必ずしも質問に答えるわけではありませんが、CSS 3ではこのスタイル（{word-wrap：break-word;}）を使用してdiv内に長い文字列を収めることができることを知りたいと思いました。

score 0 · Accepted Answer

私はおそらく質問を読み逃しましたが、これはあなたが望む望ましいレイアウトを持っていませんか？

https://jsfiddle.net/94ohw4hq/

<div id="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>

score -3 · Accepted Answer

-3

使用する

wookmarkプラグイン

あなたの問題を解決するために

于 2013-11-29T05:37:43.767 に答える

html - HTML div、コンテンツをラップする方法は？

10 に答える 10

Related

Reference