Umieszczanie wielu elementów Div (obok siebie) w obrębie rodzica Div

Moim celem jest umieszczenie czterech elementów div w pojedynczym "pojemniku" div. Oto mój kod do tej pory:Umieszczanie wielu elementów Div (obok siebie) w obrębie rodzica 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%; 
}

O ile wiem, jest to tylko część mojego kodu, który jest właściwy do mojego pytania, więc Zostawił kilka innych części. Nie zwracaj uwagi na szerokość i margines navBar, ponieważ w rzeczywistości jest to również w innym kontenerze.

P. Szukałem Google i StackOverFlow i nie mogłem znaleźć odpowiedzi, która byłaby pomocna. Było wiele pytań dotyczących umieszczania dwóch elementów div w pojedynczym elemencie div, ale nie było potrzeby ustawiania wielu elementów div w jednym div.

Dzięki za pomoc z góry!

Źródło

2013-03-22 corecase

Tak mój zły. Naprawiłem to. – corecase

Czy możesz podać JSFiddle? Problem polega na tym, że wszystkie twoje pływające elementy div dziecka mają szerokość 25% + 1-piksel. Możesz użyć 'box-sizing: border-box', aby go rozwiązać. – powerbuoy

Naprawiony człowiek, dzięki! – corecase

Zrobiłbym dwie rzeczy, pozbyłem się marginesów na twoich pływających elementach div i dodałem regułę rozmiarów skrzynek.

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

Źródło

2013-03-22 02:34:10 j08691

Nieważne, że ostatni komentarz! Dziękuję, to działa dobrze! – corecase

Można użyć 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

Źródło

2013-03-22 02:29:42

Dlaczego nauczyć go używać stołów? – dezman

nie tabela, ale tabela wyświetlania. poczuj różnicę –

OK, cóż, myślę, że dobrze jest być świadomym swoich opcji. – dezman

Myślę, że problem masz, jest to, że trzeba wyczyścić pływaków. To może nie być najlepszy sposób na zrobienie tego, ale dla uproszczenia dodaj: <div style="clear:both;"></div> po ostatnim <div> wewnątrz twojego pojemnika (#navBar).

Źródło

2013-03-22 02:29:52 dezman

Głównym problemem, który widziałem z CSS jest to, że dodatek na marginesie dla każdej pozycji pływaka. Miałoby to sens, gdyby był ustawiony absolutnie. Ponieważ to nie divy będą się układać. Usuwanie marginesów pozwoli DIV aby zmieścić się w pojemniku:

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

Źródło

2013-03-22 02:35:01 munch1324

Umieszczanie wielu elementów Div (obok siebie) w obrębie rodzica Div

Odpowiedz

Powiązane problemy