Tut mir leid, Leute, für die wirklich einfache Frage, aber ich habe versucht, ein Div nach links und eins nach rechts mit vordefinierten Breiten entlang dieser Linien zu schweben

<div style="width: 100%;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

Obwohl dies “meistens” funktioniert, scheint es die anderen Elemente auf der Seite darunter durcheinander zu bringen.

Was ist also der richtige Grund, eine HTML-Seite mit CSS vertikal in zwei Teile zu teilen, ohne andere Elemente auf der Seite zu beeinflussen?

du kannst verwenden..

<div style="width: 100%;">
   <div style="float:left; width: 80%">
   </div>
   <div style="float:right;">
   </div>
</div>
<div style="clear:both"></div>

Jetzt wird das darunter liegende Element nicht beeinflusst.

Fügen Sie einfach overflow:auto; zu übergeordneten div

<div style="width: 100%;overflow:auto;">
    <div style="float:left; width: 80%">
    </div>
    <div style="float:right;">
    </div>
</div>

Arbeitsdemo

Ich denke, Ihre Elemente auf der Seite sind durcheinander, weil Sie Ihre Floats nicht löschen, sehen Sie sich das an

Demo

HTML

<div class="wrap">
    <div class="floatleft"></div>
    <div class="floatright"></div>
    <div style="clear: both;"></div>
</div>

CSS

.wrap {
    width: 100%;
}

.floatleft {
    float:left; 
    width: 80%;
    background-color: #ff0000;
    height: 400px;
}

.floatright {
float: right;
    background-color: #00ff00;
    height: 400px;
    width: 20%;
}

Es kann auch eine Lösung geben, beides zu haben float zu left.

Probieren Sie das aus:

Arbeitsdemo

PS Dies ist nur eine Verbesserung von Ankits Antwort

Schauen Sie sich diese Geige an:

http://jsfiddle.net/G6N5T/1574/

CSS/HTML-Code:

.wrap {
    width: 100%;
    overflow:auto;
}

.fleft {
    float:left; 
    width: 33%;
background:lightblue;
    height: 400px;
}

.fcenter{
    float:left;
    width: 33%;
    background:lightgreen;
    height:400px;
    margin-left:0.25%;
}

.fright {
float: right;
    background:pink;
    height: 400px;
    width: 33.5%;
    
}

<div class="wrap">
    <!--Updated on 10/8/2016; fixed center alignment percentage-->
    <div class="fleft">Left</div>
    <div class="fcenter">Center</div>
    <div class="fright">Right</div>
</div>

Dies verwendet das CSS float -Eigenschaft für linke, rechte und zentrierte Ausrichtung von divs auf einer Seite.

Alternativ können Sie auch eine spezielle Funktion namens verwenden linearer Gradient () Funktion, um den Browserbildschirm in zwei gleiche Hälften zu teilen. Sehen Sie sich das folgende Code-Snippet an:

body
{
  background-image:linear-gradient(90deg, lightblue 50%, skyblue 50%);
}

Hier, linearer Gradient () Die Funktion akzeptiert drei Argumente

1. 90deg zum vertikal Teilung des Bildschirms. (In ähnlicher Weise können Sie verwenden 180deg für horizontale Bildschirmteilung)
2. lightblue Farbe wird verwendet, um die linke Hälfte des Bildschirms darzustellen.
3. skyblue Farbe wurde verwendet, um die rechte Hälfte des geteilten Bildschirms darzustellen. Hier, 50% verwendet wurde gleich Teilung des Browser-Bildschirms. Sie können jeden anderen Wert verwenden, wenn Sie keinen möchten gleich Teilung des Bildschirms. Hoffe das hilft. 🙂 Viel Spaß beim Programmieren!

Hier ist der Flex-Box-Ansatz:

CSS

 .parent {
  display:flex;
  height:100vh;
  }
  .child{
    flex-grow:1;
  }
  .left{
    background:#ddd;
  }
  .center{
    background:#666;
  }

  .right{
    background:#999;
  }

HTML

<div class="parent">
    <div class="child left">Left</div>
    <div class="child center">Center</div>
    <div class="child right">Right</div>
</div>

Sie können das gleiche in versuchen js Geige.