Wie richte ich Bereiche oder Bereiche horizontal aus?

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.

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.

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

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.

du kannst tun:

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

oder

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

In beiden Fällen werden die Divs horizontal gekachelt.

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>

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

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.

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.

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.

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