Jak utworzyć wiele elementów div w jednym wierszu, ale zachowują szerokość?

Question

Zazwyczaj ustawia się elementy do wyświetlenia: wstawiane, jeśli mają być wyświetlane w tym samym wierszu. Jednak ustawienie elementu do wstawienia oznacza, że ​​atrybut width byłby bez znaczenia.

Jak zrobić div być w tej samej linii, bez dokonywania ich inline?

Answer 1

Można użyć display:inline-block.

Ta właściwość pozwala element DOM mieć wszystkie atrybuty elementu blokowego, ale utrzymanie go inline. Jest kilka wad, ale przez większość czasu jest wystarczająco dobre. Why it's good and why it may not work for you.

EDIT: Jedynym nowoczesny przeglądarka ma pewne problemy z nim jest IE7. Zobacz Quirksmode.org

Answer 2

można unosić się swoimi DIV kolumn używając float: left; i podaj im szerokość.

i upewnić się, żaden z innych treści dostaje pomieszane, można owinąć płynęły div w ramach div nadrzędnego i nadać mu jakiś wyraźny pływaka stylizacji.

Mam nadzieję, że to pomoże.

Answer 3

kiedyś właściwość

display: table; 

i

display: table-cell; 

tak, by osiągnąć same.Link do bawić poniżej przedstawiono tabele 3 owinięte div i div te są następnie pakowane w div

<div id='content'> 
    <div id='div-1'><!-- COntains table --></div> 
    <div id='div-2'><!-- contains two more divs that require to be arranged one below other --></div> 
</div> 

Oto jsfiddle: http://jsfiddle.net/vikikamath/QU6WP/1/ Myślałem, że to s może być pomocne dla kogoś szukającego ustawić DIV w tej samej linii bez użycia display-inline