wake-up-neo.com

HTML/CSS: Zwei gleitende Divs auf dieselbe Höhe bringen

Ich habe ein kleines besonderes Problem, das ich derzeit mit einer table löse, siehe unten. Grundsätzlich möchte ich, dass zwei Divs 100% der verfügbaren Breite beanspruchen, aber nur so viel vertikalen Raum wie nötig beanspruchen (was im Bild nicht so offensichtlich ist). Die beiden sollten zu jeder Zeit die gleiche Höhe haben, mit einer kleinen Linie dazwischen, wie gezeigt.

alt text http://pici.se/pictures/qJRMtoLPv.png

Dies ist alles sehr einfach mit table, was ich gerade mache. Ich bin jedoch nicht besonders an der Lösung interessiert, da dies semantisch eigentlich keine Tabelle ist.

99
Deniz Dogan

Sie können Spalten mit gleicher Höhe in CSS abrufen, indem Sie eine Unterfüllung mit einem großen Betrag und einen negativen negativen Rand des gleichen Betrags anwenden und die Spalten mit einem Div umgeben, bei dem der Überlauf verborgen ist. Die vertikale Zentrierung des Textes ist etwas schwieriger, aber dies sollte Ihnen auf dem Weg helfen.

#container {
  overflow: hidden;
      width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px; /* Thank you IE */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head></head>

<body>
  <div id="container">
    <div id="left-col">
      <p>Test content</p>
      <p>longer</p>
    </div>
    <div id="right-col">
      <p>Test content</p>
    </div>
  </div>
</body>

Ich denke, es lohnt sich, das zu erwähnen die vorherige Antwort von streetpc hat ein ungültiges HTML, der Doctype ist XHTML und die Attribute sind in Anführungszeichen gesetzt. Erwähnenswert ist auch das Sie benötigen kein zusätzliches Element mit clear, um die internen Floats des Containers zu löschen. Wenn Sie den ausgeblendeten Überlauf verwenden, werden die Floats in allen Nicht-IE-Browsern gelöscht. Anschließend müssen Sie nur noch etwas hinzufügen, um hasLayout wie width oder zoom: 1 anzugeben. IE löscht seine internen Floats.

Ich habe dies in allen modernen Browsern FF3 + Opera9 + Chrome Safari 3+ und IE6/7/8 getestet. Es mag ein hässlicher Trick sein, aber es funktioniert gut und ich verwende es oft in der Produktion.

Ich hoffe das hilft.

154
Natalie Downe

Es ist das Jahr 2012 + n. Wenn Sie sich also nicht mehr für IE6/7 interessieren, funktionieren display:table, display:table-row und display:table-cell in allen modernen Browsern:

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

Update 2016-06-17: Wenn Sie denken, dass die Zeit für display:flex gekommen ist, checken Sie Flexbox Froggy aus.

94
Dmitry Leskov

Verwenden Sie dazu Flexbox. Es wird nicht in IE8 und IE9 und nur mit dem Präfix -ms in IE10 unterstützt, aber alle anderen Browser unterstützen es. Für Herstellerpräfixe sollten Sie auch autoprefixer verwenden.

.parent {
    display: flex;
    flex-wrap: wrap; // allow wrapping items
}

.child {
    flex-grow: 1;
    flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}
17
Luca Steeb

sie können dies mit js zum Laufen bringen:

<script>
    $(document).ready(function() {
        var height = Math.max($("#left").height(), $("#right").height());
        $("#left").height(height);
        $("#right").height(height);
    });
</script>
10
Andi P. Trix

Dies ist ein klassisches Problem in CSS. Dafür gibt es nicht wirklich eine Lösung.

Dieser Artikel von A List Apart ist eine gute Lektüre dieses Problems. Es verwendet eine Technik namens "Faux Columns", die auf einem vertikal gekachelten Hintergrundbild auf dem -Element basiert, das die Spalten enthält, was die Illusion gleich langer Spalten erzeugt. Da es sich auf dem Wrapper der schwebenden Elemente befindet, ist es das längste Element.


Die A List Apart-Redakteure haben folgende Anmerkung zu dem Artikel:

Anmerkung der Redaktion: Dieser Artikel ist zwar für seine Zeit hervorragend, spiegelt jedoch möglicherweise nicht die bewährten Methoden wider.

Die Technik erfordert vollständig statische Breitenentwürfe, die nicht gut mit den flüssigen Layouts und den darauf reagierenden Designtechniken funktionieren, die heutzutage für geräteübergreifende Standorte beliebt sind. Für Standorte mit statischer Breite ist dies jedoch eine zuverlässige Option.

5

Ich hatte ein ähnliches Problem und meiner Meinung nach ist es am besten, nur ein bisschen Javascript oder JavaScript zu verwenden.

Sie können die gewünschte Höhe der divs erhalten, indem Sie den höchsten div-Wert erhalten und diesen Wert auf alle anderen divs anwenden. Wenn Sie viele divs und viele Lösungen haben, schlage ich vor, wenig vorwärts js-Code zu schreiben, um herauszufinden, welches aller divs das höchste ist, und dann dessen Wert verwenden.

Mit Jquery und 2 Divs ist es sehr einfach, hier ein Beispielcode:

$('.smaller-div').css('height',$('.higher-div').css('height'));

Und zum Schluss gibt es noch eine letzte Sache ... Die Polsterung (oben und unten) muss gleich sein! Wenn eine größere Auffüllung vorhanden ist, müssen Sie den Unterschied der Auffüllung beseitigen. 

4
Mr Br

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>

1
ms muthu

Dies funktioniert für mich in IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows).

Funktioniert auch in IE 6, wenn Sie das clearer div auskommentierenEdit: Wie Natalie Downe sagte, können Sie stattdessen einfach width: 100%; zu #container hinzufügen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <style type="text/css">
        #container {
            overflow: hidden;
            border: 1px solid black;
            background-color: red;
        }
        #left-col {
            float: left;
            width: 50%;
            background-color: white;
        }
        #right-col {
            float: left;
            width: 50%;
            margin-right: -1px; /* Thank you IE */
        }
    </style>
</head>
<body>
    <div id='container'>
        <div id='left-col'>
            Test content<br />
            longer
        </div>
        <div id='right-col'>
            Test content
        </div>
        <!--div style='clear: both;'></div-->
    </div>
</body>
</html>

Ich kenne keine CSS-Methode, um den Text in der rechten Spalte vertikal zu zentrieren, wenn die Breite nicht gleich ist. Wenn dies der Fall ist, können Sie line-height auf den gleichen Wert wie die div-Höhe einstellen und ein inneres div mit display: inline; line-height: 110%, das Ihren Text enthält, eingeben.

1
instanceof me

Mit Javascript können Sie die beiden div-Tags auf die gleiche Höhe bringen. Das kleinere div wird mit dem folgenden Code auf die gleiche Höhe wie das höchste div-Tag eingestellt: 

var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}

Mit "links" und "rechts" sind die IDs der div-Tags. 

1
Quintox303

Soweit ich weiß, können Sie dies nicht mit den aktuellen Implementierungen von CSS tun. Um zwei Spalten zu erstellen, benötigen Sie JS.

1
Calin Don

Mit der Eigenschaft css -> display: table-cell

div {
    border: 1px solid #000;
    margin: 5px;
    padding: 4px;
	display:table-cell;
	width:25%	;position:relative;
}
body{display:table;
	border-collapse:separate;
	border-spacing:5px 5px}
<div>
    This is my div one This is my div one This is my div one
</div>
<div>
    This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
    This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>

0
user5139166

Verwenden Sie in JS data-same-height="group_name" in allen Elementen, die dieselbe height haben sollen.

Das Beispiel: https://jsfiddle.net/eoom2b82/

Der Code:

$(document).ready(function() {
    var equalize = function () {
        var disableOnMaxWidth = 0; // 767 for bootstrap

        var grouped = {};
        var elements = $('*[data-same-height]');

        elements.each(function () {
            var el = $(this);
            var id = el.attr('data-same-height');

            if (!grouped[id]) {
                grouped[id] = [];
            }

            grouped[id].Push(el);
        });

        $.each(grouped, function (key) {
            var elements = $('*[data-same-height="' + key + '"]');

            elements.css('height', '');

            var winWidth = $(window).width();

            if (winWidth <= disableOnMaxWidth) {
                return;
            }

            var maxHeight = 0;

            elements.each(function () {
                var eleq = $(this);
                maxHeight = Math.max(eleq.height(), maxHeight);
            });

            elements.css('height', maxHeight + "px");
        });
    };

    var timeout = null;

    $(window).resize(function () {
        if (timeout) {
            clearTimeout(timeout);
            timeout = null;
        }

        timeout = setTimeout(equalize, 250);
    });
    equalize();
});
0
Wiliam

Vor einigen Jahren hat die Eigenschaft float dieses Problem mit dem Ansatz table unter Verwendung von display: table; und display: table-row; und display: table-cell; gelöst.

Aber jetzt mit der Eigenschaft flex können Sie es mit 3 Codezeilen lösen: display: flex; und flex-wrap: wrap; und flex: 1 0 50%;

.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
 // flex: flex-grow flex-shrink flex-basis;
    flex: 1 0 50%;
}

1 0 50% sind die flex Werte, die wir gegeben haben: flex-grow flex-shrink flex-basis. Es ist eine relativ neue Verknüpfung in flexbox, um zu vermeiden, dass sie einzeln eingegeben werden. Ich hoffe das hilft jemandem da draußen

0
FouadDev

Ich musste etwas ähnliches tun, hier ist meine Implementierung. Um den Zweck zu rekapitulieren, müssen zwei Elemente die Breite eines übergeordneten Containers einnehmen, und die Höhe muss nur so hoch sein, wie sie benötigt wird. Im Wesentlichen Höhe, die der maximalen Höhe des größten Inhalts entspricht, der andere Behälter jedoch bündig ist. 

html

<div id="ven">
<section>some content</section>
<section>some content</section>
</div>

css

#ven {
height: 100%;
}
#ven section {
width: 50%;
float: left;
height: 100%;
}
0
this guy