webentwicklung-frage-antwort-db.com.de

Einfaches zweispaltiges HTML-Layout ohne Verwendung von Tabellen

Ich bin auf der Suche nach einer super einfachen Methode, ein zweispaltiges Format zu erstellen, um Daten auf einer Webseite anzuzeigen. Wie kann ich dasselbe Format erreichen wie:

<table>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
    </tr>
</table>

Ich bin auch offen für HTML5/CSS3-Techniken.

60
Fixer
<style type="text/css">
#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>

Stellen Sie sicher, dass die Summe der Spaltenbreiten der Umschlagsbreite entspricht. Alternativ können Sie auch Prozentwerte für die Breite verwenden.

Weitere Informationen zu grundlegenden Layouttechniken mit CSS finden Sie in diesem Tutorial

89
Dennis Traub

Nun, Sie können CSS-Tabellen anstelle von HTML-Tabellen verwenden. Dadurch bleibt Ihre HTML-Datei semantisch korrekt, Sie können jedoch Tabellen für Layoutzwecke verwenden. 

Dies scheint sinnvoller als die Verwendung von Float-Hacks. 

<html>
  <head>
    <style>

#content-wrapper{
  display:table;
}

#content{
  display:table-row;
}

#content>div{
  display:table-cell
}

/*adding some extras for demo purposes*/
#content-wrapper{
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  position:absolute;
}
#nav{
  width:100px;
  background:yellow;
}
#body{
  background:blue;
}
</style>

  </head>
  <body>
    <div id="content-wrapper">
      <div id="content">
        <div id="nav">
          Left hand content
        </div>
        <div id="body">
          Right hand content
        </div>
      </div>
    </div>
  </body>
</html>
40
RobKohr

Ich weiß, dass diese Frage bereits beantwortet wurde, aber nachdem ich mich ziemlich gut mit dem Layout befasst hatte, wollte ich eine alternative Antwort hinzufügen, die einige traditionelle Probleme mit schwebenden Elementen löst ...

Sie können das aktualisierte Beispiel hier in Aktion sehen.

http://jsfiddle.net/Sohnee/EMaDB/1/

Dabei spielt es keine Rolle, ob Sie HTML 4.01 oder HTML5 mit semantischen Elementen verwenden (Sie müssen den linken und den rechten Container als display: block deklarieren, falls diese noch nicht vorhanden sind).

CSS

.left {
    background-color: Red;
    float: left;
    width: 50%;
}

.right {
    background-color: Aqua;
    margin-left: 50%;
}

HTML

<div class="left">
    <p>I have updated this example to show a great way of getting a two column layout.</p>
</div>
<div class="right">
    <ul>
        <li>The columns are in the right order semantically</li>
        <li>You don't have to float both columns</li>
        <li>You don't get any odd wrapping behaviour</li>
        <li>The columns are fluid to the available page...</li>
        <li>They don't have to be fluid to the available page - but any container!</li>
    </ul>
</div>

Es gibt auch eine recht nette (wenn auch neuere) Ergänzung zu CSS, mit der Sie Inhalte in Spalten einordnen können, ohne dass dies mit divs herumspielt:

column-count: 2;
35
Fenton

Es gibt jetzt eine viel einfachere Lösung als vor fünf Jahren, als diese Frage ursprünglich gestellt wurde. Mit einer CSS-Flexbox ist das ursprünglich angefragte zweispaltige Layout einfach. Dies entspricht der Entsprechung der Tabelle in der ursprünglichen Frage:

<div style="display: flex">
    <div>AAA</div>
    <div>BBB</div>
</div>

Eine schöne Sache bei einer Flexbox ist, dass Sie auf einfache Weise festlegen können, wie untergeordnete Elemente verkleinert werden sollen, um sich an die Containergröße anzupassen. Ich werde das obige Beispiel erweitern, um das Feld auf die volle Breite der Seite zu bringen, die linke Spalte mindestens 75px breit machen und die rechte Spalte vergrößern, um den verbleibenden Platz einzufangen. Ich werde auch den Stil in einen eigenen Block ziehen, einige Hintergrundfarben zuweisen, damit die Spalten sichtbar sind, und die ältere Flex-Unterstützung für einige ältere Browser hinzufügen.

<style type="text/css">
.flexbox {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    width: 100%;
}

.left {
    background: #a0ffa0;
    min-width: 75px;
    flex-grow: 0;
}

.right {
    background: #a0a0ff;
    flex-grow: 1;
}
</style>

...

<div class="flexbox">
    <div class="left">AAA</div>
    <div class="right">BBB</div>
</div>

Flex ist relativ neu. Wenn Sie also die Unterstützung von IE 8 und IE 9 nicht nutzen können, können Sie es nicht verwenden. Zum jetzigen Zeitpunkt weist http://caniuse.com/#feat=flexbox zumindest teilweise Unterstützung durch Browser auf, die von 94,04% des Marktes genutzt werden.

10
twm

Nun, wenn Sie die super einfachste Methode wollen, setzen Sie einfach 

<div class="left">left</div>
<div class="right">right</div>

.left {
    float: left;    
}

je nachdem, welche anderen Layoutanforderungen Sie haben, benötigen Sie möglicherweise mehr.

8

Alle vorherigen Antworten geben nur einen hart codierten Ort an, an dem die erste Spalte endet und die zweite Spalte beginnt. Ich hätte erwartet, dass dies nicht erforderlich ist oder gar nicht gewünscht wurde.

Aktuelle CSS-Versionen kennen ein Attribut mit dem Namen columns, das die spaltenbasierten Layouts sehr einfach macht. Bei älteren Browsern müssen Sie auch -moz-columns und -webkit-columns angeben.

Hier ist ein sehr einfaches Beispiel, das bis zu drei Spalten erstellt, wenn jede mindestens 200 Pixel Breite hat. Andernfalls werden weniger Spalten verwendet:

<html>
  <head>
    <title>CSS based columns</title>
  </head>
  <body>
    <h1>CSS based columns</h1>
    <ul style="columns: 3 200px; -moz-columns: 3 200px; -webkit-columns: 3 200px;">
      <li>Item one</li>
      <li>Item two</li>
      <li>Item three</li>
      <li>Item four</li>
      <li>Item five</li>
      <li>Item six</li>
      <li>Item eight</li>
      <li>Item nine</li>
      <li>Item ten</li>
      <li>Item eleven</li>
      <li>Item twelve</li>
      <li>Item thirteen</li>
    </ul>
  </body>
</html>
6
Axel Beckert

Wenn Sie die HTML5-Methode verwenden möchten (dieser bestimmte Code eignet sich besser für Dinge wie Blogs, bei denen <article> mehrmals verwendet wird, einmal für jeden Blogeintrag-Teaser; letztendlich spielen die Elemente selbst keine Rolle, es ist das Styling und das Element Platzierung, die Ihnen die gewünschten Ergebnisse bringt):

<style type="text/css">
article {
  float: left;
  width: 500px;
}

aside {
  float: right;
  width: 200px;
}

#wrap {
  width: 700px;
  margin: 0 auto;
}
</style>

<div id="wrap">
  <article>
     Main content here
  </article>
  <aside>
     Sidebar stuff here
  </aside>
</div>
3
Shauna

Ich weiß, dass dies ein alter Beitrag ist, aber ich dachte, ich würde meine zwei Penneth hinzufügen. Wie wäre es mit der selten verwendeten und oft vergessenen Beschreibungsliste? Mit einem einfachen CSS-Code können Sie ein wirklich sauberes Markup erhalten.

<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>

schauen Sie sich dieses Beispiel an http://codepen.io/butlerps/pen/wGmXPL

2
philip

Mit diesem Code können Sie nicht nur zwei Spalten hinzufügen, sondern auch so viele Spalten hinzufügen, wie Sie möchten, und sie nach links oder rechts ausrichten, Farben ändern, Links hinzufügen usw. Auch der Link Fiddle ist verfügbar

Geigen-Link: http://jsfiddle.net/eguFN/

<div class="menu">
                <ul class="menuUl">
                    <li class="menuli"><a href="#">Cadastro</a></li>
                    <li class="menuli"><a href="#">Funcionamento</a></li>
                    <li class="menuli"><a href="#">Regulamento</a></li>
                    <li class="menuli"><a href="#">Contato</a></li>
                </ul>
</div>

Css ist wie folgt

.menu {
font-family:arial;
color:#000000;
font-size:12px;
text-align: left;
margin-top:35px;
}

.menu a{
color:#000000
}

.menuUl {
  list-style: none outside none;
  height: 34px;
}

.menuUl > li {
  display:inline-block;
  line-height: 33px;
  margin-right: 45px;

}
1
harishannam

ein paar kleine Änderungen, um es ansprechbar zu machen

<style type="text/css">
#wrap {
    width: 100%;
    margin: 0 auto;
    display: table;
}
#left_col {
   float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}
@media only screen and (max-width: 480px){
    #left_col {
       width:100%;
    }
    #right_col {
       width:100%;
    }
}
</style>

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
</div>
0
Altravista

Sie können Textspalten mit CSS Multiple Columns Eigenschaft erstellen. Sie brauchen keine Tabelle oder mehrere Divs.

HTML

<div class="column">
       <!-- paragraph text comes here -->
</div> 

CSS

.column {
    column-count: 2;
    column-gap: 40px;
}

Weitere Informationen zu CSS Multiple Columns finden Sie unter https://www.w3schools.com/css/css3_multiple_columns.asp

0
TThomas
<div id"content">
<div id"contentLeft"></div>
<div id"contentRight"></div>
</div> 

#content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
#contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
#contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
} 

Natürlich müssen Sie die Größe der Spalten an Ihre Site sowie die Farben usw. anpassen. Dies sollte jedoch der Fall sein. Sie müssen auch sicherstellen, dass die Breiten von ContentLeft und ContentRight die Breite von Contents (einschließlich Rändern) nicht überschreiten.

0
Magnum26