it-swarm.com.de

Wie kann ich Spannweiten oder Divs horizontal ausrichten?

Mein einziges Problem besteht darin, sie in drei Richtungen auszurichten und den gleichen Abstand zu haben. Anscheinend können Spannweiten keine Breite und keine Divs (und Spannweiten mit Anzeige: Block) haben, die nicht horizontal nebeneinander erscheinen. Vorschläge?

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

83
Thomas Owens

Sie können divs mit dem float: left;-Attribut verwenden, wodurch sie horizontal nebeneinander angezeigt werden. In diesem Fall müssen Sie jedoch die folgenden Elemente löschen, um sicherzustellen, dass sie sich nicht überlappen. 

75
jmcd

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 Breite haben, sind aber wie Schaltflächenelemente inline.

Oh, und Sie müssen möglicherweise vertikal ausrichten: top auf den Elementen, um sicherzustellen, dass die Dinge aufeinander abgestimmt sind

38
runeh

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, es kann jedoch auch eine Breite haben. Sie müssen nur die Anzeigeeigenschaft auf Block setzen. In diesem Zusammenhang ist ein Div jedoch wahrscheinlich geeigneter, da Sie diese Divs wahrscheinlich mit Inhalten füllen möchten.

Eine Sache, die Sie definitiv nicht wollen, ist clear:both für die divs. Wenn Sie dies so einstellen, bedeutet das, dass der Browser nicht zulässt, dass sich Elemente in derselben Zeile befinden. Das Ergebnis werden Ihre Elemente stapeln.

Beachten Sie die Verwendung von display:inline. Es handelt sich hierbei um den Fehler der ie6-Marge-Verdopplung. Sie können dies ggf. auf andere Weise angehen, z. B. in bedingten Stylesheets.

Ich habe einen Wrapper (#whatever) hinzugefügt, da ich davon ausgehe, dass dies nicht die einzigen Elemente auf der Seite sein werden. Sie müssen sie also höchstwahrscheinlich von den anderen Seitenelementen trennen. 

Wie auch immer, ich hoffe das ist hilfreich. 

10

du kannst tun: 

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

oder 

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

Beides bewirkt, dass die divs horizontal kacheln.

4
Jeremy B.

Ich würde es in etwa so machen, da es 3 gleich große Spalten, gleichmäßige Abstände und (sogar) Skalen gibt. Hinweis: Dies wird nicht getestet, daher müssen ältere Browser möglicherweise 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>
3
monkey do

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 nehme ... aber jetzt sollte ich es tun ...

1

Sie möchten vielleicht CSS-basierte Layouts nachschlagen. Bei dieser Layoutmethode müssen Sie einige CSS-Klassen angeben, um den Seiteninhalt an einer Gitterstruktur auszurichten. Es ist enger mit dem druckbasierten Layout als mit dem Web verbunden, aber es ist eine Technik, die auf vielen Websites verwendet wird, um den Inhalt in einer Struktur anzuordnen, ohne auf Tabellen zurückzugreifen.

Versuchen Sie dies für Anfänger aus dem Smashing Magazine.

1
marcus.greasly

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

Es funktioniert mit Blockelementen wie div. Was Sie auch anzeigen möchten, Tabellen sind nicht schlecht, wenn Sie wirklich versuchen, eine Tabelle mit einigen Informationen anzuzeigen.

0
Nick

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

Sie können dann width und/oder height nach Ihren Wünschen einstellen. Sie können sogar einige vertikale Ausrichtungsregeln angeben.

0
d1rk
    <!-- 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 ... Versuchen Sie, float: left; oder right; zu verwenden, ändern Sie die width für andere Werte ... es sollte funktionieren ... Englisch :)

0