Posizionamento di più Div (affiancati) all'interno di un genitore Div

Il mio obiettivo è piazzare quattro div all'interno di un singolo "contenitore" div. Ecco il mio codice finora:Posizionamento di più Div (affiancati) all'interno di un genitore Div

HTML

<body> 
    <div id="navBar"> 
     <div id="subDiv1"> 
     </div> 
     <div id="subDiv2"> 
     </div> 
     <div id="subDiv3"> 
     </div> 
     <div id="subDiv4"> 
     </div> 
    </div> 
</body>

CSS

#navBar 
{ 
    width: 75%; 
    height: 75px; 
    margin-left: 25%; 
    margin-right: auto; 
    margin-top: 2%; 
    border-width: 1px; 
    border-style: solid; 
    border-radius: 10px; 
    border-color: #008040; 
    overflow: hidden; 
} 

#subDiv1, #subDiv2, #subDiv3, #subDiv4 
{ 
    width: 25%; 
    height: 75px; 
    border-width: 1px; 
    border-color: #000; 
    border-style: solid; 
} 
#subDiv1 
{ 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    float: left; 
    margin-left: 0%; 
} 
#subDiv2 
{ 
    float: left; 
    margin-left: 25%; 
} 
#subDiv3 
{ 
    float: left; 
    margin-left: 50%; 
} 
#subDiv4 
{ 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
    float: left; 
    margin-left: 75%; 
}

Per quanto ne so questa è l'unica parte del mio codice che è rilevante per la mia domanda in modo da lasciato alcune altre parti fuori. Non importa la larghezza e il margine della barra di navigazione, perché è in realtà anche all'interno di un altro contenitore.

P.S Ho cercato Google e StackOverFlow e non sono riuscito a trovare una risposta che fosse utile. Ci sono state molte domande sul posizionamento di due div all'interno di un singolo div, ma nessuno per l'allineamento di più div all'interno di un singolo div.

Grazie per qualsiasi aiuto in anticipo!

fonte

2013-03-22 corecase

Già il mio male. Appena risolto – corecase

Potresti fornire un JSFiddle? Il problema sembra essere che tutte le tue divs floated child sono del 25% di larghezza + un bordo di 1px. Potresti usare 'dimensionamento della scatola: border-box' per risolverlo. – powerbuoy

È un uomo fisso, grazie comunque! – corecase

Farei due cose, sbarazzarmi dei margini sui div flottanti e aggiungere la regola di ridimensionamento della scatola.

jsFiddle example

#navBar { 
    width: 75%; 
    height: 75px; 
    margin-left: 25%; 
    margin-right: auto; 
    margin-top: 2%; 
    border-width: 1px; 
    border-style: solid; 
    border-radius: 10px; 
    border-color: #008040; 
    overflow: hidden; 
} 
#subDiv1, #subDiv2, #subDiv3, #subDiv4 { 
    width: 25%; 
    height: 75px; 
    border-width: 1px; 
    border-color: #000; 
    border-style: solid; 
    box-sizing:border-box; 
} 
#subDiv1 { 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    float: left; 
} 
#subDiv2 { 
    float: left; 
} 
#subDiv3 { 
    float: left; 
} 
#subDiv4 { 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
    float: left; 
}

fonte

2013-03-22 02:34:10 j08691

Non importa quale ultimo commento! Grazie, questo funziona bene! – corecase

È possibile utilizzare display: table

.menu { 
    display: table; 
    width: 100%; 
    border: 1px solid black; 
    border-right: none; 
    box-sizing: border-box; 
} 
.menu > div { 
    display: table-row; 
    background-color: green; 
} 
.menu > div >div { 
    border-right: 1px solid black; 
    display: table-cell; 
    text-align: center; 
} 

@media screen and (max-width: 400px) { 
    .menu { 
     display: block; 
     float: left; 
     width: auto; 
     border: none; 
    } 
    .menu > div { 
     display: block; 
    } 
    .menu > div > div { 
     border: none; 
     padding-right: 10px; 
     display: block; 
     text-align: left; 
    } 
}

fiddle

fonte

2013-03-22 02:29:42

Perché insegnargli a usare le tabelle? – dezman

non tabella, ma tabella di visualizzazione. senti la differenza –

Ok, beh, immagino sia bello essere consapevole delle tue opzioni. – dezman

Credo che il problema si stanno avendo, è che è necessario cancellare i tuoi carri allegorici. Questo potrebbe non essere il modo migliore per farlo, ma per amor di semplicità, aggiungere questo: <div style="clear:both;"></div> dopo l'ultimo <div> all'interno del contenitore (#navBar).

fonte

2013-03-22 02:29:52 dezman

Il problema principale che ho visto con il CSS è che si aggiunge un margine per ciascun elemento galleggiante. Questo avrebbe senso se fosse posizionato assolutamente. Dal momento che non sono i div verranno impilati. La rimozione dei margini permetterà ai div per adattarsi nel contenitore:

http://jsfiddle.net/eGLTM/

#navBar 
{ 
    width: 75%; 
    height: 75px; 
    margin-left: 25%; 
    margin-right: auto; 
    margin-top: 2%; 
    border-width: 1px; 
    border-style: solid; 
    border-radius: 10px; 
    border-color: #008040; 
    overflow: hidden; 
} 

#subDiv1, #subDiv2, #subDiv3, #subDiv4 
{ 
    width: 24%; 
    height: 75px; 
    border-width: 1px; 
    border-color: #000; 
    border-style: solid; 
} 
#subDiv1 
{ 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    float: left; 
    margin-left: 0%; 
} 
#subDiv2 
{ 
    float: left; 
} 
#subDiv3 
{ 
    float: left; 
} 
#subDiv4 
{ 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
    float: left; 
}

fonte

2013-03-22 02:35:01 munch1324

Posizionamento di più Div (affiancati) all'interno di un genitore Div

risposta

Problemi correlati