it-swarm.com.de

Zwei Divs nebeneinander - Flüssigkeitsanzeige

Ich versuche, zwei Divs nebeneinander zu platzieren und benutze dafür das folgende CSS.

#left {
  float: left;
  width: 65%;
  overflow: hidden;
}

#right {
  overflow: hidden;
}

Das HTML ist einfach, zwei links und rechts div in einem Wrapper div.

<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>

Ich habe so oft versucht, auf StackOverflow und anderen Websites nach einem besseren Weg zu suchen, konnte aber die genaue Hilfe nicht finden.

Der Code funktioniert also auf den ersten Blick einwandfrei. Das Problem ist, dass das linke Div automatisch einen Abstand/Rand erhält, wenn ich die Breite in (%) vergrößere. Also, bei einer Breite von 65% hat das linke Div etwas Abstand oder Rand und ist nicht perfekt mit dem rechten Div ausgerichtet. Ich habe versucht, Abstand/Rand 0 zu machen, aber kein Glück. Zweitens, wenn ich in die Seite zoome, verschiebt sich das rechte Teil unter das linke Teil. Es ist wie eine nicht flüssige Anzeige.

Hinweis: Es tut mir leid, ich habe viel gesucht. Diese Frage wurde oft gestellt, aber diese Antworten helfen mir nicht weiter. Ich habe erklärt, was das Problem in meinem Fall ist.

Ich hoffe, dass es dafür eine Lösung gibt.

Danke.

EDIT: Sorry, ich HTML-Problem, Es gab zwei "Box" -Divs sowohl auf der linken als auch auf der rechten Seite, Sie hatten Polsterung in%, also zeigte die linke Seite mehr Polsterung wegen der größeren Breite. Entschuldigung, das obige CSS funktioniert einwandfrei, seine flüssige Anzeige und das Problem wurden behoben. Entschuldigung, dass Sie die falsche Frage gestellt haben ...

184
Waleed

Mit diesem CSS für meine aktuelle Website. Es funktioniert perfekt

#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} 
89
Waleed

Geige

Versuchen Sie stattdessen ein System wie dieses:

HTML:

<section class="container">
    <div class="one"></div>
    <div class="two"></div>
</section>

CSS:

.container {
    width: 80%;
    height: 200px;
    background: aqua;
    margin: auto;
    padding: 10px;
}
.one {
    width: 15%;
    height: 200px;
    background: red;
    float: left;
}
.two {
    margin-left: 15%;
    height: 200px;
    background: black;
}

Sie müssen nur eine Division schweben lassen, wenn Sie den linken Rand der anderen entsprechend der Breite der ersten Division verwenden. Dies funktioniert unabhängig vom Zoom und hat keine Subpixel-Probleme.

221
dezman

Mit einer Flexbox ist das ganz einfach:

#wrapper {
  display: flex;
}

#left {
  flex: 0 0 65%;
}

#right {
  flex: 1;
}
<div id="wrapper">
  <div id="left">Left side div</div>
  <div id="right">Right side div</div>
</div>
171
user4427511

Hier ist meine Antwort für diejenigen, die googeln:

CSS:

.column {
    float: left;
    width: 50%;
}

/* Clear floats after the columns */
.container:after {
    content: "";
    display: table;
    clear: both;
}

Hier ist das HTML:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>
6
Malachi Bazar