HTML/CSS: Zwei schwebende Divs in der gleichen Höhe machen
https://stackoverflow.com/questions/1205159
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich habe ein wenig eigenartiges Problem, das ich derzeit mit a lösen kann table, siehe unten. Grundsätzlich möchte ich, dass zwei Divs 100% der verfügbaren Breite einnehmen, aber nur so viel vertikalen Raum wie nötig einnehmen (was aus dem Bild nicht wirklich offensichtlich ist). Die beiden sollten zu jeder Zeit genau die gleiche Höhe mit einer kleinen Grenze zwischen ihnen haben, wie gezeigt.
(Quelle: pici.se)
Dies ist alles sehr einfach zu verwenden table, was ich gerade mache. Ich bin jedoch nicht besonders begeistert von der Lösung, da dies semantisch kein Tisch ist.
Lösung
Sie können in CSS gleich hochhöhespalten erhalten, indem Sie die untere Polsterung einer großen Menge, den unteren negativen Rand derselben Menge und die Säulen mit einem DIV, das überlaufen ist, versteckt aufweist. Das vertikale Zentrieren 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, das erwähnenswert das Die vorherige Antwort von StreetPC hat ungültige HTML, der docType ist xhtml und es gibt einzelne Zitate rund um die Attribute. Auch erwähnenswert ist das Sie brauchen kein zusätzliches Element mit clear auf, um die internen Schwimmer des Behälters zu löschen. Wenn Sie überflüssiges verstecktes verwenden, löscht dies die Schwimmer in allen Nicht-IE-Browsern und fügen dann nur etwas hinzu, um Haslayout wie Breite oder Zoom zu verleihen: 1 führt dazu, dass der IE seine internen Schwimmer löscht.
Ich habe dies in allen modernen Browsern FF3+ Opera9+ Chrome Safari 3+ und IE6/7/8 getestet. Es mag wie ein hässlicher Trick erscheinen, aber es funktioniert gut und ich benutze ihn viel in Produktion.
Ich hoffe das hilft.
Andere Tipps
Es ist Jahr 2012+n. Wenn Sie sich also nicht mehr um IE6/7 interessieren, display:table, display:table-row und display:table-cell Arbeiten Sie in allen modernen Browsern:
http://www.456bereasttreet.com/archive/200405/equal_heigh_boxes_with_css/
Update 2016-06-17: Wenn Sie der Meinung sind, dass die Zeit gekommen ist für display:flex, Kasse Flexbox Froggy.
Sie sollten Flexbox verwenden, um dies zu erreichen. Es wird in IE8 und IE9 nicht unterstützt und nur mit dem -ms -Präfix in IE10, aber alle anderen Browser unterstützen es. Für Anbieterpräfixe sollten Sie auch verwenden Autoprefixer.
.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.
}
Sie können dies mit JS zum Arbeiten bringen:
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>
Dies ist ein klassisches Problem in CSS. Dafür gibt es nicht wirklich eine Lösung.
Dieser Artikel aus einer Liste auseinander ist eine gute Lektüre zu diesem Problem. Es verwendet eine Technik namens "Faux Columns", basierend auf einem vertikal gefliesten Hintergrundbild auf dem Element, das die Spalten enthält Das erzeugt die Illusion gleicherer Spalten. Da es sich um die Wrapper der schwebenden Elemente handelt, ist es so lang wie das längste Element.
Die A -Liste AUSSCHEDELDE haben diese Notiz im Artikel:
Ein Hinweis der Redakteure: Obwohl dieser Artikel ausgezeichnet für seine Zeit ist, spiegelt er möglicherweise nicht moderne Best Practices wider.
Die Technik erfordert vollständig statische Breitendesigns, die nicht gut zu den flüssigen Layouts und den reaktionsschnellen Designtechniken funktionieren, die heute für Cross-Gerätsstandorte beliebt sind. Für statische Breitenstellen ist dies jedoch eine zuverlässige Option.
Ich hatte ein ähnliches Problem und meiner Meinung nach ist es die beste Option, nur ein bisschen JavaScript oder JQuery zu verwenden.
Sie können gewünschte DIVs auf der gleichen Größe 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, empfehle ich, einen kleinen Vorab -JS -Code zu schreiben, um herauszufinden, welches der Divs am höchsten ist, und dann den Wert verwenden.
Mit JQuery und 2 Divs ist es sehr einfach, hier ist Beispielcode:
$('.smaller-div').css('height',$('.higher-div').css('height'));
Und zum Ende gibt es 1 letztes. Ihre Polsterung (oben und unten) muss gleich sein! Wenn man eine größere Polsterung hat, müssen Sie die Differenz von Padding beseitigen.
Soweit ich weiß, können Sie dies nicht mit aktuellen Implementierungen von CSS tun. Um zwei Säulen zu erstellen, benötigen Sie Js.
Dies funktioniert für mich in IE 7, FF 3.5, Chrome 3B, Safari 4 (Windows).
Funktioniert auch in IE 6, wenn Sie die klarere Div am Boden unterziehen.Bearbeiten: Wie Natalie Downe sagte, können Sie einfach hinzufügen width: 100%; zu #container stattdessen.
<!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 keinen CSS -Weg, um den Text in der richtigen Div vertikal zu zentrieren, wenn die DIV nicht festhöhe ist. Wenn ja, können Sie die festlegen line-height auf den gleichen Wert wie die Div -Höhe und setzen Sie einen inneren Div mit Ihrem Text mit display: inline; line-height: 110%.
Mit JavaScript können Sie die beiden Div -Tags zur gleichen Höhe erstellen. Das kleinere Div wird mit dem unten gezeigten 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.
Mit CSS-Eigenschaft-> Anzeige: Tabellenzell
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>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>Verwenden Sie JS, verwenden Sie data-same-height="group_name" In allen Elementen möchten Sie dasselbe haben Höhe.
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();
});
Ich musste etwas Ähnliches tun, hier ist meine Implementierung. Um den Zweck zusammenzufassen, müssen 2 Elemente die Breite eines bestimmten Elternbehälters und die Höhe, die nur so hoch ist, wie es sein muss, einnehmen. Im Wesentlichen Höhe entspricht maximaler Höhe des größten Inhalts, aber der andere Behälter ist bündig.
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%;
}
