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

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.

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ą.

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

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.

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.

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>

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 ...

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.

Spójrz na właściwość css Float. http://w3schools.com/css/pr_class_float.asp

Działa z elementami blokowymi, takimi jak div. Alternatywnie, co próbujesz wyświetlić, tabele nie są złe, jeśli naprawdę próbujesz pokazać tabelę niektórych informacji.

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.

    <!-- 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 :)