Divs HTML, comment envelopper le contenu?

J'ai 3 div est comme sur cette image:

Divs HTML, comment envelopper le contenu?

div1 a une largeur fixe, mais variable en hauteur, ce que je voudrais, c'est que si div1 hauteur est plus grande que la div2 hauteur, la div3 les séjours de moins de div2 et sur le droit de la div1, comme ici:

Divs HTML, comment envelopper le contenu?

Aucune idée sur comment faire? Pour l'instant, j'ai créé un conteneur:

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

Mon CSS est comme ceci:

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

Ici est la JSFiddle démo

source d'informationauteur Miloš

  1. 4

    Que CSS ne pas fournir tout ce que le travail encore, vous devrez utiliser le Javascript.

    Je voudrais tout d'abord créer une page comme sur votre première image.
    Alors je voudrais utiliser

    $("#div").height()

    qui renvoie à la hauteur de votre div et de le comparer à votre deuxième div hauteur:

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

    Dans le corps, mettre le nécessaire css changements... cela devrait faire l'affaire.

  2. 5

    Atlast, je l'ai eu 🙂 Juste envelopper tous ces trois éléments dans un élément parent comme indiqué ci-dessous.

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

    Travail violon

    Si vous voulez avoir la largeur de la troisième div à l'échelle de partir avant de lui-même alors je vous recommande fortement d'aller avec jQuery.

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

    jQuery

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

    Travail Violon

  3. 4

    Si vous le style le #content comme cela que ça fonctionne.

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

    Avis il n'y a pas de float.

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

    jsFiddle avec une égale hauteur à gauche de la colonne et du contenu: en effet, les http://jsfiddle.net/JRbFy/2/

  4. 2

    Si j'ai bien compris vous voulez quelque chose de ce genre?

    <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>
  5. 2

    Cela devrait fonctionner pour vous, au moins vous diriger dans la bonne direction.

    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>
  6. 2

    Et enfin ma solution est en trop 🙂

    Démo: http://jsfiddle.net/JRbFy/3/

    Juste en utilisant margin: 10px auto; , et en prenant la content div de la 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;
}

    Espère que ça aide

  7. 0

    De voir que tout le monde luuuuuuurves jQuery, j'ai décidé de jeter quelque chose ensemble qui ne fait ce que vous avez demandé. Amusez-vous 🙂

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

    Jeter un peu de css

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

    Et enfin votre jQuery.

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

    Maintenant. Je ne suis pas préconisent cette méthode, juste pour dire qu'en fait, il a réalisé ce que vous l'avez demandé alors que rien d'autre n'a ici 😉

    Voir à cette jsFiddle. Simplement ajouter un plus <p>Test</p> div1 et vous verrez que div3 puis va vers la droite de la div1 selon votre image.

    Maintenant, je sais que quelqu'un va dire "Mais div1 ne prend pas toute la hauteur et alors!", eh bien n'ayez pas peur. De vérifier la mise à jour jsFiddle avec un ajout de la pièce vers le javascript pour voir les réponses à vos questions. Il suffit de supprimer l'un des <p>Test</p> de la div1.

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

    - Je rappeler que cette solution s'appuie sur le Javascript. Éteignez l'appareil ne supporte pas, ce arrêts de travail.

  8. 0

    Pas nécessairement de réponses à la question, mais j'ai pensé que vous aimeriez savoir que dans le CSS 3 vous pouvez utiliser ce style - {word-wrap: break-word;} - pour s'adapter à une longue chaîne à l'intérieur d'un div.

  9. 0

    J'ai probablement manqué de lire la question, mais n'est-ce pas avoir la mise en page souhaitée que vous vouliez.

    https://jsfiddle.net/94ohw4hq/

    <div id="container">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
<div class="bottom">
Bottom
</div>
</div>
  10. -3

    Utilisation

    wookmark plugin

    pour résoudre votre problème