Wie richte ich Bereiche oder Bereiche horizontal aus?

87

Mein einziges Problem ist, dass sie dreifach ausgerichtet sind und den gleichen Abstand haben. Anscheinend können Bereiche keine Breite haben und Divs (und Bereiche mit Anzeige: Block) werden nicht horizontal nebeneinander angezeigt. Vorschläge?

<div style='width:30%; text-align:center; float:left; clear:both;'> Ist was ich jetzt habe.

css html Thomas Owens
quelle
2
Warum willst du keinen Tisch benutzen?
DOK
63
Weil die Daten nicht tabellarisch sind.
Thomas Owens
10
Die folgenden Antworten sind geeignet, aber denken Sie daran, dass die Verwendung einer Tabelle Ihnen weniger Kopfschmerzen bereitet, wenn Sie die Dinge komplizierter machen. Es ist in Ordnung, eine Tabelle zu verwenden, wenn dies Ihre Arbeit erleichtert. Sei pragmatisch! :-)
Rahul
5
Im Ernst, benutze keinen Tisch. So etwas ist mit CSS einfach.
Sam Murray-Sutton
26
"Es ist in Ordnung, einen Tisch zu verwenden, wenn dies Ihre Arbeit erleichtert." ist absolut schrecklicher Rat. Bitte ignorieren! :)
Bobby Jack

Antworten:

77

Sie können divs mit dem float: left;Attribut verwenden, wodurch sie horizontal nebeneinander angezeigt werden. Anschließend müssen Sie möglicherweise die folgenden Elemente löschen, um sicherzustellen, dass sie sich nicht überlappen.

jmcd
quelle
17
Eigentlich kann man einfach einstellen overflow: hidden. Siehe: stackoverflow.com/questions/323599/…
David Wolever
1
Ich finde, dass dies das Layout in nachfolgenden Divs brechen kann. Wenn ich beispielsweise Ihre Lösung verwende und dann versuche, sie padding-leftim Div rechts anzuzeigen, wird sie ignoriert.
Sebastian Mach
2
Es gibt keinen Grund zum Überdenken: <div style="display: in-line"></div><div style="display: in-line"></div>sollte gut funktionieren.
Zoltar
Die Verwendung von float bringt eine ganze Reihe neuer Probleme mit sich. overflow: hiddenist die beste Lösung.
Saran3h
39

Sie können verwenden

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

Wenn Sie nur Browser unterstützen müssen, die Inline-Blöcke unterstützen. Inline-Blöcke können eine Breite haben, sind jedoch wie Schaltflächenelemente inline.

Oh, und Sie möchten möglicherweise eine vertikale Ausrichtung hinzufügen: Oben auf den Elementen, um sicherzustellen, dass die Dinge in einer Linie liegen

runeh
quelle
1
Die vertikale Ausrichtung funktioniert nicht bei Elementen auf Blockebene. In diesem Fall handelt es sich um Elemente, deren Anzeige auf Inline-Block eingestellt wurde.
Runeh
1
Inline-Block wird jetzt unterstützt in jedem A Klasse Browser außer IE6 / 7, aber es gibt einen Hack zu bekommen inline-block zur Arbeit in IE6 / 7.
Alexander Bird
12

Meine Antwort:

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

Warum?

Technisch gesehen ist ein Span ein Inline-Element, kann jedoch eine Breite haben. Sie müssen lediglich die Anzeigeeigenschaft so einstellen, dass sie zuerst blockiert wird. In diesem Zusammenhang ist ein Div wahrscheinlich besser geeignet, da Sie diese Divs vermutlich mit Inhalten füllen möchten.

Eine Sache, die Sie definitiv nicht tun möchten, ist clear:bothdie Divs eingestellt zu haben. Wenn Sie dies so einstellen, kann der Browser nicht zulassen, dass Elemente in derselben Zeile wie sie stehen. Das Ergebnis ist, dass sich Ihre Elemente stapeln.

Beachten Sie die Verwendung von display:inline. Dies befasst sich mit dem ie6-Randverdopplungsfehler. Sie können dies bei Bedarf auf andere Weise angehen, z. B. durch bedingte Stylesheets.

Ich habe einen Wrapper (#whatever) hinzugefügt, da ich vermute, dass dies nicht die einzigen Elemente auf der Seite sind. Daher müssen Sie sie mit ziemlicher Sicherheit von den anderen Seitenelementen trennen.

Wie auch immer, ich hoffe das ist hilfreich.

Sam Murray-Sutton
quelle
Dies schien nicht zu funktionieren, als ich es ausschneide und in jsfiddle einfüge
Jamie Fristrom
1
Entschuldigung, Tippfehler dort; Ich hätte nach jeder dieser Zeilen ein Semikolon setzen sollen, dann funktioniert es; Ich habe entsprechend bearbeitet. Obwohl ich diese Frage erneut geprüft habe, würde ich vorschlagen, dass das OP seinem Beispiel etwas mehr Code hinzufügen muss. Wie die Antworten hier zeigen, gibt es eine Vielzahl von Ansätzen, die hier verwendet werden können, und genau das, was Sie verwenden, hängt vom Kontext ab.
Sam Murray-Sutton
4

du kannst tun: 

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

oder 

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

In beiden Fällen werden die Divs horizontal gekachelt.

Jeremy B.
quelle
3

Ich würde es in etwa so machen, da es Ihnen 3 Spalten mit gleicher Größe, gleichmäßigen Abständen und (geraden) Maßstäben gibt. Hinweis: Dies ist nicht getestet, daher müssen möglicherweise ältere Browser angepasst werden.

<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>
Affe tun
quelle
2

Ich würde ... benutzen:

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

Es ist das erste Mal, dass ich dieses 'Code-Tool' aus dem Überlauf verwende ... aber ich sollte es jetzt tun ...

Talevineto
quelle
1

Möglicherweise möchten Sie CSS-Raster-basierte Layouts nachschlagen. Bei dieser Layoutmethode werden einige CSS-Klassen angegeben, um den Seiteninhalt an einer Rasterstruktur auszurichten. Es ist enger mit dem druckbasierten Layout verbunden als mit dem webbasierten, aber es ist eine Technik, die auf vielen Websites verwendet wird, um den Inhalt in eine Struktur zu gestalten, ohne auf Tabellen zurückgreifen zu müssen.

Versuchen Sie dies für den Anfang vom Smashing Magazine.

marcus.greasly
quelle
0

Schauen Sie sich die CSS-Float-Eigenschaft an. http://w3schools.com/css/pr_class_float.asp

Es funktioniert mit Blockelementen wie div. Alternativ: Was möchten Sie anzeigen? Tabellen sind nicht böse, wenn Sie wirklich versuchen, eine Tabelle mit Informationen anzuzeigen.

Nick
quelle
Aber es ist kein Tisch. Das sind nur drei Dinge, die ich nebeneinander erscheinen lassen möchte.
Thomas Owens
404 Seite nicht gefunden
Ali Yousefi
0

Ich würde versuchen, ihnen alle display: block;Attribute und Verwendung zu geben float: left;.

Sie können dann einstellen widthund / oder heightwie Sie möchten. Sie können sogar einige Regeln für die vertikale Ausrichtung angeben.

d1rk
quelle
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>

eine andere ... versuche zu verwenden float: left;oder right;, ändere die widthfür andere Werte ... es sollte funktionieren ... beachte auch, dass die 10%, die nicht von der Div verwendet werden, zwischen ihnen liegen ... Entschuldigung für schlechtes Englisch :)

Talevineto
quelle