Come mettere due scatole div parallelamente

Quindi sono abbastanza nuovo per scrivere codici (circa poche settimane) e ho colpito un muro mentre scrivevo i codici per il mio sito web. Voglio avere un layout come questoCome mettere due scatole div parallelamente

ma non riesco a capire come mettere due fianco a fianco scatole (una scatola sarà un video che spiega il mio sito web, l'altra scatola sarà un segno di modulo di registrazione .) Voglio che siano l'uno accanto all'altro, con una separazione di circa un pollice tra le scatole.

Ho anche bisogno di aiuto con la larghezza del mio sito web? In questo momento sembra che l'intestazione non si adatti alla pagina, causando uno scorrimento orizzontale. Un po 'come questo

Lo voglio in modo che l'intero sito web assomigli a tutto ciò che è una grande scatola, e voglio tutto il contenuto all'interno della scatola. Qualcuno può aiutarmi? Molto apprezzato. Grazie in anticipo.

fonte

2013-03-13 Richard Linares

Potrebbe incollare un po 'del vostro codice css qui? – kabuto178

Dai un'occhiata a CSS e HTML in profondità lo scoprirai. Fa semplicemente fluttuare le caselle a destra e a sinistra e quelle caselle devono essere all'interno di uno stesso div. http://www.w3schools.com/html/html_layout.asp potrebbe essere una buona risorsa.

fonte

2013-03-13 00:38:36

w3schools deve essere evitato come risorsa, molte delle informazioni non sono accurate. Il wiki W3C è un'alternativa decente http://www.w3.org/wiki/CSS/Training –

questo funzionerà

<div style="width:800px;"> 
    <div style="width:300px; float:left;"></div> 
    <div style="width:300px; float:right;"></div> 
</div>

fonte

2013-03-13 00:39:25

I div interni non sono terminati correttamente. Solo una nota per i futuri copy-pasters. :) –

Ho aggiunto

subito dopo per impedire che i seguenti elementi galleggiassero – Thomas

E 'abbastanza semplice:

http://jsfiddle.net/kkobold/qMQL5/

<div id="header"></div> 
<div id="container"> 
    <div id="first"></div> 
    <div id="second"></div> 
    <div id="clear"></div> 
</div>

#header { 
    width: 100%; 
    background-color: red; 
    height: 30px; 
} 

#container { 
    width: 300px; 
    background-color: #ffcc33; 
    margin: auto; 
} 
#first { 
    width: 100px; 
    float: left; 
    height: 300px; 
     background-color: blue; 
} 
#second { 
    width: 200px; 
    float: left; 
    height: 300px; 
    background-color: green; 
} 
#clear { 
    clear: both; 
}

fonte

2013-03-13 00:40:18

Grazie per il post! – user481610

Per quanto riguarda la larghezza del tuo sito web, ti consigliamo a considerare l'utilizzo di una classe wrapper per circondare il vostro contenuto (questo dovrebbe aiutare a limitare le vostre larghezze di elementi e impedire loro di espandersi troppo al di là del contenuto):

<style> 
.wrapper { 
    width: 980px; 
} 
</style> 

<body> 
    <div class="wrapper"> 
    //everything else 
    </div> 
</body>

Per quanto riguarda le caselle di contenuto andare, vorrei suggerire cercando di uso

<style> 
.boxes { 
    display: inline-block; 
    width: 360px; 
    height: 360px; 
} 
#leftBox { 
    float: left; 
} 
#rightBox { 
    float: right; 
} 
</style>

vorrei passare un po 'di tempo alla ricerca del box model-oggetto e tutte le proprietà "display". Saranno per sempre utili. Presta particolare attenzione al "blocco in linea", lo uso praticamente ogni giorno.

fonte

2013-03-13 02:51:14

-1

In base al layout fornito è possibile utilizzare la proprietà float left in css.

HTML

<div id="header"> LOGO</div> 
<div id="wrap"> 
<div id="box1"></div> 
<div id="box2"></div> 
<div id="clear"></div> 
</div> 
<div id="footer">Footer</div>

CSS

body{ 
margin:0px; 
height: 100%; 
} 
#header { 

background-color: black; 
height: 50px; 
color: white; 
font-size:25px; 

} 

#wrap { 

margin-left:200px; 
margin-top:300px; 


} 
#box1 { 
width:200px; 
float: left; 
height: 300px; 
background-color: black; 
margin-right: 20px; 
} 
#box2{ 
width: 200px; 
float: left; 
height: 300px; 
background-color: blue; 
} 
#clear { 
clear: both; 
} 
#footer { 
width: 100%; 
background-color: black; 
height: 50px; 
margin-top:300px; 
color: white; 
font-size:25px; 
position: absolute; 
}

fonte

2014-07-22 20:06:57 prashanth

Come mettere due scatole div parallelamente

risposta

Problemi correlati