Jak wyrównać zakresy lub elementy div w poziomie?


88

Moim jedynym problemem jest ustawienie ich w jednej linii i równych odstępach. Najwyraźniej przęsła nie mogą mieć szerokości, a elementy div (i przęsła z display: block) nie pojawiają się obok siebie poziomo. Propozycje?

<div style='width:30%; text-align:center; float:left; clear:both;'> Jest tym, co mam teraz.


2
Dlaczego nie chcesz korzystać ze stołu?
DOK

63
Ponieważ dane nie są tabelaryczne.
Thomas Owens

10
Odpowiedzi poniżej są odpowiednie, ale pamiętaj, że korzystanie ze stołu przyniesie mniej bólu głowy, jeśli w końcu skomplikujesz sprawę. Możesz używać stołu, jeśli ułatwia to pracę. Bądź pragmatyczny! :-)
Rahul

5
poważnie, nie używaj stołu. Takie rzeczy są łatwe z CSS.
Sam Murray-Sutton

26
„Można używać stołu, jeśli ułatwia to pracę”. to absolutnie straszna rada. Proszę ignorować! :)
Bobby Jack

Odpowiedzi:


78

Możesz użyć elementów div z float: left;atrybutem, który spowoduje, że pojawią się obok siebie poziomo, ale wtedy może być konieczne wyczyszczenie następujących elementów, aby upewnić się, że się nie nakładają.


17
Właściwie możesz po prostu ustawić overflow: hidden. Zobacz: stackoverflow.com/questions/323599/…
David Wolever

1
Uważam, że może to zepsuć układ w kolejnych elementach div. Np. Jeśli użyję twojego rozwiązania, a następnie spróbuję padding-leftw div po prawej stronie, zostanie ono zignorowane.
Sebastian Mach

2
Nie ma powodu do przemyślenia: <div style="display: in-line"></div><div style="display: in-line"></div>powinno działać dobrze.
zoltar

używanie float wprowadza całą masę nowych problemów. overflow: hiddento najlepsze rozwiązanie.
saran3h

39

Możesz użyć

.floatybox {
     display: inline-block;
     width: 123px;
}

Jeśli potrzebujesz tylko obsługi przeglądarek, które obsługują wbudowane bloki. Bloki wbudowane mogą mieć szerokość, ale są wbudowane, podobnie jak elementy przycisków.

Aha, i możesz chcieć dodać wyrównanie pionowe: u góry elementów, aby upewnić się, że wszystko się zgadza


1
wyrównywanie w pionie nie działa na elementach blokowych. W tym przypadku mówimy o elementach, których wyświetlanie zostało ustawione na inline-block.
runeh

1
inline-block jest teraz obsługiwany w każdej przeglądarce klasy A z wyjątkiem IE6 / 7, ale jest pewien hack, który sprawi, że inline-block będzie działał w IE6 / 7.
Alexander Bird,

12

Moja odpowiedź:

<style>
 #whatever div {
  display: inline;
  margin: 0 1em 0 1em;
  width: 30%;
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

Czemu?

Technicznie rzecz biorąc, Span jest elementem wbudowanym, jednak może mieć szerokość, wystarczy najpierw ustawić jego właściwość wyświetlania na blok. Jednak w tym kontekście element div jest prawdopodobnie bardziej odpowiedni, ponieważ domyślam się, że chcesz wypełnić te elementy div treścią.

Jedną rzeczą, której na pewno nie chcesz, jest clear:bothustawienie elementów div. Ustawienie tego w ten sposób oznacza, że ​​przeglądarka nie pozwoli, aby żadne elementy znajdowały się w tej samej linii co one. W rezultacie twoje elementy będą się układać.

Uwaga, użycie display:inline. Dotyczy to błędu podwajania marginesu ie6. Jeśli to konieczne, możesz rozwiązać ten problem na inne sposoby, na przykład warunkowe arkusze stylów.

Dodałem otokę (#cokolwiek), ponieważ domyślam się, że nie będą to jedyne elementy na stronie, więc prawie na pewno będziesz musiał oddzielić je od innych elementów strony.

W każdym razie mam nadzieję, że to pomocne.


To nie wydaje się do pracy, kiedy wyciąć i wkleić go do jsfiddle
Jamie Fristrom

1
Przepraszam, literówka tam; Powinienem był wstawić średnik po każdym z tych wierszy, to działa; Odpowiednio zredagowałem. Chociaż ponownie przeanalizowałem to pytanie, sugerowałbym, aby OP musiał dodać trochę więcej kodu do swojego przykładu. Jak pokazują odpowiedzi tutaj, istnieje wiele różnych podejść, które można tutaj zastosować, a dokładnie to, czego użyjesz, będzie zależeć od kontekstu.
Sam Murray-Sutton

4

możesz to zrobić:

<div style="float: left;"></div>

lub

<div style="display: inline;"></div>

Każda z nich spowoduje ułożenie elementów div w poziomie.


3

Zrobiłbym to w ten sposób, ponieważ daje 3 równe rozmiary kolumn, równe odstępy i (równe) skale. Uwaga: nie jest to testowane, więc może wymagać poprawek w starszych przeglądarkach.

<style>
html, body {
    margin: 0;
    padding: 0;
}

.content {
    float: left;
    width: 30%;
    border:none;
}

.rightcontent {
    float: right;
    width: 30%;
    border:none
}

.hspacer {
    width:5%;
    float:left;
}

.clear {
    clear:both;
}
</style>

<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="content">content</div>
<div class="hspacer">&nbsp;</div>
<div class="rightcontent">content</div>
<div class="clear"></div>

2

Użyłbym:

<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%; 
}
.sidebox { 
float: right;
width: 30%; 
}
<div class="all">
   <div class="maincontent">
       MainContent
   </div>
   <div class="sidebox"> 
       SideboxContent
   </div>
</div>

Po raz pierwszy używam tego `` narzędzia kodu '' z przepełnienia ... ale powinienem to zrobić już teraz ...


1

Możesz sprawdzić układy oparte na siatce CSS. Ta metoda układu wymaga określenia niektórych klas CSS, aby wyrównać zawartość strony do struktury siatki. Jest bardziej związany z układem drukowanym niż oparty na Internecie, ale jest to technika używana w wielu witrynach internetowych do układania treści w strukturę bez konieczności uciekania się do tabel.

Spróbuj tego na początek z magazynu Smashing.



0

Spróbowałbym nadać im wszystkim display: block;atrybut i użycie float: left;.

Następnie możesz ustawić widthi / lub heightjak chcesz. Możesz nawet określić kilka reguł wyrównania w pionie.


0
    <!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>

inny ... spróbuj użyć float: left;lub right;zmień widthna inne wartości ... to powinno działać ... pamiętaj również, że 10%, które nie są używane przez div, jest między nimi ... przepraszam za zły angielski :)

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.