div HTML, come avvolgere il contenuto?

Ho 3 div come su questa immagine:div HTML, come avvolgere il contenuto?

enter image description here

div1 è a larghezza fissa, ma altezza variabile, quindi quello che vorrei è che se div1 altezza è più grande che l'altezza div2, i soggiorni div3 sotto div2 e sulla destra del div1, come qui:

enter image description here

Qualche idea su come fare questo? Per il momento, ho creato un contenitore:

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

mio CSS è come questo:

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

Ecco la JSFiddle demo

fonte

2013-02-19 Miloš

Il link alla tua domanda precedente potrebbe essere utile per gli altri [http://stackoverflow.com/questions/14954311/how-to-create-a-specific-layout-in-html ] (http://stackoverflow.com/questions/14954311/how-to-create-a-specific-layout-in-html) – Wez

@Milos Puoi spiegare come verrà modificata l'altezza di div1? –

@Mr_Green, infatti, il div1 ha altezza min definita da css, ma se ci sono altri dati nel div, l'altezza del dif sarà automaticamente aumentata. –

come CSS non prevede nulla per quel lavoro ancora, si dovrà utilizzare Javascript.

Innanzitutto creo una pagina come nella prima immagine. Poi vorrei usare

$("#div").height()

, che restituisce l'altezza del vostro div e confrontare questo all'altezza tua seconda del div:

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

Nel caso corpo mettere le modifiche necessarie CSS ... che dovrebbe fare il trucco.

fonte

2013-02-19 16:53:40 ltsstar

Grazie @ltsstar, ma sei sicuro che non ci sia una soluzione CSS/HTML per questo? –

È * possibile * essere fatto con i CSS ... –

In primo luogo. Questo non raggiunge una terza area che fluttua a destra del primo quando il contenuto del secondo è più corto, quindi fallisce la prima immagine. In secondo luogo. Non posso credere che sei andato a tutto questo sforzo per un layout a due colonne !! – Rafe

Atlast, ho capito :) Basta avvolgere tutti quei tre elementi in un elemento genitore, come mostrato di seguito.

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

Working fiddle

Se si vuole avere la larghezza del terzo div ad essere largo da prima di se stesso quindi mi raccomando tu vai con jQuery.

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

jQuery

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

Working Fiddle

fonte

2013-02-19 16:48:05

@Milos Beh, ti ho dato una demo che può dimostrare quanto fossi vicino con solo css. Si prega di provare su quella demo per ottenere il risultato. Sono sicuro che mi mancano alcune cose stupide da usare in css. –

Ho provato da quando è stata fatta questa domanda. Non riesco a ottenerlo con puro CSS. Forse con l'assistenza di qualcosa come SASS, ma questo è impossibile con nient'altro che CSS3 standard. Il mio violino: http://jsfiddle.net/n8N59/ – Michael

Mio signore sembra che ci siano molte persone che cercano di usare js qui. Js non è sempre disponibile. JS non è mai il modo di affrontare questa situazione! – Rafe

Se ho capito bene, vuoi qualcosa del genere?

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

fonte

2013-02-19 17:03:00 solusipse

Se si stile il #content come questo funziona.

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

Avviso non c'è galleggiante.

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

jsFiddle con uguale altezza nella colonna di sinistra ed effetto contenuti: http://jsfiddle.net/JRbFy/2/

fonte

2013-02-19 17:03:38

Sembra funzionare bene su JSFiddle, devo testarlo sul mio progetto. Grazie mille –

Aggiornato con una uguale altezza '# content' e anche la versione' .col-left'. :) –

Questo dovrebbe funzionare per voi, almeno si punta nella direzione giusta.

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>

fonte

2013-02-19 17:07:42 Nexcius

E infine la mia soluzione arriva troppo :)

Demo: http://jsfiddle.net/JRbFy/3/

Usando solo margin: 10px auto;, e prendendo la content div fuori del 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; 
}

Speranza che aiuta

fonte

2013-02-19 17:24:19

Visto che tutti luuuuuuurves jQuery, ho deciso di gettare qualcosa insieme che in realtà quello che hai chiesto. Buon divertimento :)

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

gettare in alcuni css

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

E infine il tuo jQuery.

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

Ora. Non sto sostenendo questo metodo, solo dicendo che in realtà ha raggiunto quello che hai chiesto mentre nient'altro qui ha;)

Vedi a this jsFiddle. Basta aggiungere un altro < p> Test </p> a div1 e vedrai che div3 si sposta a destra di div1 come da immagine.

Ora, so che qualcuno dirà "Ma div1 non prende tutta l'altezza quindi!", Beh, non temere. Controlla lo updated jsFiddle con un pezzo aggiunto al javascript per vedere anche le tue domande. Basta eliminare uno dei < p> Test </p> da div1.

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

Devo ribadire che questa soluzione si basa su Javascript. Spegnilo, il dispositivo non lo supporta, questo smette di funzionare.

fonte

2013-03-03 07:06:56 Rafe

-2

Usa

wookmark plug

per risolvere il tuo problema

fonte

2013-11-29 05:37:43

Non risponde necessariamente la domanda, ma ho pensato che avrebbe fatto piacere sapere che in CSS 3 è possibile usare questo stile - {word-wrap: break-word;} - per adattare una stringa lunga all'interno di un div.

fonte

2016-03-18 15:12:10

Probabilmente mi sono perso la domanda ma questo non ha il layout desiderato che volevi.

https://jsfiddle.net/94ohw4hq/

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

fonte

2016-04-12 15:12:16 05beckga

div HTML, come avvolgere il contenuto?

risposta

Problemi correlati