In CSS kann ich so etwas tun:

Aber ich habe keine Ahnung, wie ich das in etwas ändern soll wie:

Ist das mit CSS möglich?

Wenn ja, wie kann ich dies tun, ohne die Höhe explizit anzugeben (den Inhalt wachsen lassen)?

Gitter

Heutzutage bevorzuge ich Raster, weil es erlaubt, alle Layoutdeklarationen auf dem übergeordneten Element zu belassen und standardmäßig Spalten gleicher Breite enthält:

.row {
  display: grid;
  grid-auto-flow: column;
  gap: 5%;
}

.col {
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>

Flexbox

Verwenden Sie Flexbox, wenn Kinder die Spaltenbreite steuern sollen:

.row {
  display: flex;
  justify-content: space-between;
}

.col {
  flex-basis: 30%;
  box-sizing: border-box;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
</div>

Ja.

Hier ist das fertige CSS, das der Artikel verwendet. Es lohnt sich , den gesamten Artikel zu lesen , da der Autor Schritt für Schritt erklärt, was Sie für diese Arbeit benötigen.

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Dies ist nicht die einzige Methode, aber es ist wahrscheinlich die eleganteste Methode, die mir begegnet ist.

Es gibt eine andere Site, die vollständig auf diese Weise erstellt wurde. Wenn Sie die Quelle anzeigen, können Sie sehen, wie sie es getan haben .

Geben overflow: hidden dem Behälter einen großen (und gleichen) negativen Rand und eine positive Auffüllung der Spalten. Beachten Sie, dass diese Methode einige Probleme aufweist, z. B. funktionieren Ankerverknüpfungen in Ihrem Layout nicht.

Markup

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

CSS

.container {
    overflow: hidden;
}

.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

Das Ergebnis

Sie können CSS-Tabellen wie folgt verwenden:

<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }
</style>
<div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
    </div>
</div>

Sie können dies einfach mit dem folgenden JavaScript tun:

$(window).load(function() {
    var els = $('div.left, div.middle, div.right');
    els.height(getTallestHeight(els));
}); 

function getTallestHeight(elements) {
    var tallest = 0, height;

    for(i; i < elements.length; i++) {
        height = $(elements[i]).height();

        if(height > tallest) 
            tallest = height;
    }

    return tallest;
};

Moderne Vorgehensweise: CSS Grid.

HTML:

<div class="container">
  <div class="element">{...}</div>
  <div class="element">{...}</div>
  <div class="element">{...}</div>
</div>

CSS:

.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.element {
  border: 2px solid #000;
}

Live Beispiel ist hier .

repeat(auto-fit, minmax(200px, 1fr));Teil legt die Spaltenbreite fest. Jede Spalte benötigt 1 Bruchteil des verfügbaren Speicherplatzes, darf jedoch nicht weniger als 200 Pixel groß sein. Anstatt unter 200 Pixel zu schrumpfen, wird es darunter gewickelt, sodass es sogar reagiert. Sie können auch eine beliebige Anzahl von Spalten haben, nicht nur 3. Sie passen alle gut.

Wenn Sie genau 3 Spalten benötigen, verwenden Sie grid-template-columns: repeat(3, 1fr);stattdessen. Sie können noch mehr Elemente haben, diese werden umbrochen, reagieren, werden aber immer in einem 3-Spalten-Layout platziert.

Mehr zu CSS Grid auf MDN oder CSS -Tricks .

Es ist sauber, lesbar, wartbar, flexibel und auch so einfach zu bedienen!

Sie können es versuchen ... es funktioniert für mich und alle Browser kompatibel ...

<div id="main" style="width:800px; display:table">
<div id="left" style="width:300px; border:1px solid #666; display:table-cell;"></div>
<div id="right" style="width:500px; border:1px solid #666; display:table-cell;"></div>
</div>

Eine andere Möglichkeit besteht darin, ein Framework zu verwenden, das dies gelöst hat. Bootstrap hat derzeit keine Option für die gleiche Höhe, Foundation by Zurb jedoch, und Sie können hier sehen, wie es funktioniert: http://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

Hier ist ein Beispiel, wie Sie es verwenden würden:

<div class="row" data-equalizer>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
    <div class="large-6 columns panel" data-equalizer-watch>
    </div>
</div>

Grundsätzlich verwenden sie Javascript, um nach dem höchsten Element zu suchen und die anderen auf die gleiche Höhe zu bringen.

Wenn Sie also nur CSS möchten, würde dies mehr Code hinzufügen, aber wenn Sie bereits ein Framework verwenden, haben sie dies bereits gelöst.

Viel Spaß beim Codieren.

Verwenden Sie Flexbox , um Spalten gleicher Höhe zu erstellen

* {box-sizing: border-box;}

/* Style Row */
.row {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
}

/* Make the columns stack on top of each other */
.row > .column {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

/* When Screen width is 400px or more make the columns stack next to each other*/
@media screen and (min-width: 400px) {
  .row > .column {    
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

<div class="row">
  <!-- First Column -->
  <div class="column" style="background-color: #dc3545;">
    <h2>Column 1</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Second Column -->
  <div class="column" style="background-color: #ffc107;">
    <h2>Column 2</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>
  </div>
  <!-- Third Column -->
  <div class="column" style="background-color: #007eff;">
    <h2>Column 3</h2>
    <p>Some Text...</p>
    <p>Some Text...</p>
    <p>Some Text...</p>    
  </div>
</div>

Antwort:

CSS-Flexbox ist niedlich, aber das Ausschneiden von IE9-Benutzern ist heute ein wenig verrückt. Auf unseren Immobilien zum 1. August 2015:

3% IE9
2% IE8

Wenn Sie diese ausschneiden, werden 5% einer fehlerhaften Seite angezeigt? Verrückt.

Unter Verwendung einer Medienabfrage den Weg Bootstrap tut geht an IE8 zurück wie tut display: table/table-cell. Damit:

http://jsfiddle.net/b9chris/bu6Lejw6/

HTML

<div class=box>
    <div class="col col1">Col 1<br/>Col 1</div>
    <div class="col col2">Col 2</div>
</div>

CSS

body {
    font: 10pt Verdana;
    padding: 0;
    margin: 0;
}

div.col {
    padding: 10px;
}

div.col1 {
    background: #8ff;
}
div.col2 {
    background: #8f8;
}

@media (min-width: 400px) {
    div.box {
        display: table;
        width: 100%;
    }
    div.col {
        display: table-cell;
        width: 50%;
    }
}

In diesem Fall habe ich 400px als Wechsel zwischen Spalten und vertikalem Layout verwendet, da jsfiddle-Fenster eher klein sind. Wenn Sie sich mit der Größe dieses Fensters anlegen, werden sich die Spalten gut neu anordnen, einschließlich der Dehnung auf die volle Höhe, wenn sie Spalten sein müssen, damit ihre Hintergrundfarben nicht auf der Seite abgeschnitten werden. Keine verrückten Padding / Margin-Hacks, die auf spätere Tags auf der Seite stoßen, und kein Werfen von 5% Ihrer Besucher auf die Wölfe.

Hier ist ein Beispiel, das ich gerade in SASS mit veränderbarer Spaltenlücke und Spaltenmenge (Variablen) geschrieben habe:

CSS:

.fauxer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.fauxer {
  overflow: hidden; }

.fauxer > div {
  display: table;
  border-spacing: 20px;
  margin: -20px auto -20px -20px;
  width: -webkit-calc(100% + 40px);
  width: -moz-calc(100% + 40px);
  width: calc(100% + 40px); }

.fauxer > div > div {
  display: table-row; }

.fauxer > div > div > div {
  display: table-cell;
  width: 20%;
  padding: 20px;
  border: thin solid #000; }

<div class="fauxer">
                <div>
                    <div>
                        <div>
                            Lorem column 1
                        </div>
                        <div>
                            Lorem ipsum column 2 dolor sit amet, consetetur sadipscing elitr, 
                            sed diam nonumy eirmod tempor invidunt ut labore et 
                            dolore magna aliquyam erat, sed diam voluptua.
                        </div>
                        <div>
                            Lorem column 3
                        </div>
                        <div>
                            Lorem column 4
                        </div>
                        <div>
                            Lorem column 5
                        </div>
                    </div>
                </div>
            </div>

Hinweis: Ich habe nur die Zeit gefunden, es in einigen neuen Browsern zu testen. Bitte testen Sie es gut, bevor Sie es verwenden werden :)

Das bearbeitbare Beispiel in SCSS finden Sie hier: JSfiddle