Zwei Möglichkeiten, die Float-Höhe an mehrere Divs in CSS anzupassen

CSS hat mehrere Div-Floats nebeneinander und die Höhen sind alle adaptiv (erhöhen sich automatisch)

Wenn Sie Div + CSS für ein drei- oder zweispaltiges Layout verwenden, legen Sie die Höhen der beiden Spalten fest (oder drei Spalten) ist das Gleiche. Es ist einfach, es mit Table zu implementieren, aber es ist schwieriger, Div + CSS zu verwenden. Gemäß der allgemeinen Praxis verwenden die meisten von ihnen das Füllen von Hintergrundbildern oder JS-Skripte, um die Höhe gleich zu machen.

Methode 1: Reine CSS-Lösung (Methode, die „versteckten Containerüberlauf“ und „positiven inneren Patch“ und „negativen äußeren Patch“ kombiniert):

<style type="text/css">
<!--
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
-->
</style>
<div id="wrap" style="width:300px; background:#FFFF00;">
    <div id="sidebar_left" style="float:left;width:100px; height:1000px; background:#FF0000;">Left</div>
    <div id="sidebar_mid" style="float:left;width:100px; background:#666;">
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    Middle<br />
    </div>
    <div id="sidebar_right" style="float:right;width:100px; height:500px; background:#0000FF;">Right</div>
</div>

Methode 2: js-Lösung (Idee, diese Methode wird nicht empfohlen):

<script>
var a=Math.max(document.getElementById("left").offsetHeight,document.getElementById("center").offsetHeight,document.getElementById("right").offsetHeight);  //获取3个div的最大高度
document.getElementById("left").style.height = a + "px";
document.getElementById("center").style.height = a + "px";
document.getElementById("right").style.height = a + "px";
</script>

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten, die Float-Höhe an mehrere Divs in CSS anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!