Sto cercando di creare un sistema di base, ma il gioco deve essere fatto con i div.
Il fatto è che sto sempre scherzando con il mio div styling quando lo faccio io stesso, come un div che esce dal contenitore div e cose del genere.
Quello che sto cercando di ottenere è molto semplice.
- Ci dovrebbe essere un div contenitore 800x800.
- La prima altezza 200px e la larghezza 600px dovrebbero contenere un nuovo div denominato descrizione.
- 200 px di larghezza sul lato destro dovrebbe essere una nuova div denominata logo.
- Ci dovrebbe essere un altro div qui, altezza 200px e larghezza 800px.
In basso, abbiamo usato 400 px di altezza e 800 px di larghezza. voglio renderlo simile a questo: (tutto 400px) altezza.
Da sinistra a destra;
100px - un blocco con nome div (contiene un bloccoimmagine) 150px - un div chiamato item-1. 100px - un blocco con nome div (contiene un'immagine del blocco) 150px - un elemento con nome diviso-2. 100px - un blocco con nome div (contiene un'immagine del blocco) 150px - un elemento denominato 3. 100px - un blocco con nome div (contiene un'immagine del blocco)
Qualcuno potrebbe aiutarmi in questo caso? Un piccolo esempio mi aiuterà.
Grazie.
risposte:
1 per risposta № 1Il seguente codice dovrebbe aiutarti. La larghezza totale va da 800 px, quindi ho aumentato la larghezza a 850 px.
<body>
<div style="width:850px; margin:0 auto;">
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="height:400px; width:150px; float:left" name="item-1"></div>
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="height:400px; width:150px; float:left" name="item-2"></div>
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="height:400px; width:150px; float:left" name="item-3"></div>
<div style="height:400px; width:100px; float:left" name="block"></div>
<div style="clear:both"></div>
</div>
</body>
-1 per risposta № 2
Innanzitutto, la maggior parte delle persone qui non si prende gentilmenteti viene chiesto di fare il tuo lavoro per te, che è fondamentalmente quello che stai chiedendo qui. Farai molto meglio a provare quello che stai cercando di fare, poi tornerai qui con domande specifiche.
Detto questo, invece, cercherò di aiutarti con il problema che si trova sotto la tua domanda, date le note all'interno del tuo post.
Mi sembra che tu non abbia una buona conoscenza dei float e di come essi influenzino gli elementi HTML (e i loro elementi principali). CSS-Tricks ha un articolo fenomenale sui float. In breve, applicando float a un elemento estrae dal normale flusso di documenti HTML e consente di allineare gli elementi a livello di blocco uno accanto all'altro. I problemi sorgono quando tutti gli elementi figlio di un contenitore sono floated, che fa collassare il contenitore genitore su se stesso. Questo effetto collassante può anche verificarsi quando un elemento figlio è floated, ma un altro non è, e il non-floatl'elemento ed occupa meno spazio verticale rispetto al floated uno. In tale situazione, il genitore "collassa" a quell'elemento childe più piccolo, lasciando il float più grande traboccante del genitore. Una volta capito come funzionano i float (e la clearing), la tua vita sarà molto più facile.
Inoltre, potresti anche voler esaminare display: inline-block;, che può risolvere una serie di mal di testa con cose come la navigazione orizzontale.
modificare Dall'aspetto del sito che hai collegato, un altrouno dei tuoi problemi è che stai cercando di aggiustare l'altezza degli elementi del tuo contenitore, quindi fare in modo che l'altezza totale degli elementi figlio sia maggiore di quella del genitore. Ti rimando ai CSS-Tricks, per informazioni sul modello di box CSS.
In breve, però, se hai una scatola che "s 2 piedialto, e al suo interno si impilano altre due scatole, una alta 1 piede e una alta 1,5 piedi, quindi le scatole interne sporgeranno dal contenitore, poiché la loro altezza si somma a più dell'altezza del contenitore . Lo stesso concetto si applica al web design, specialmente quando si utilizzano dimensioni fisse.