Zwei Divs nebeneinander - Flüssigkeitsanzeige

222

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

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

#right {
  overflow: hidden;
}

Der HTML-Code ist einfach, zwei linke und rechte 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 nicht die genaue Hilfe finden.

Der Code funktioniert also auf den ersten Blick einwandfrei. Das Problem ist, dass der linke Teil automatisch aufgefüllt wird, wenn ich die Breite in (%) erhöhe. Bei einer Breite von 65% hat das linke Div etwas Polsterung oder Rand und ist nicht perfekt mit dem rechten Div ausgerichtet. Ich habe versucht, Polsterung / Rand 0, aber kein Glück. Zweitens, wenn ich die Seite vergrößere, gleitet das rechte Div unter das linke Div. Es ist wie keine flüssige Anzeige.

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

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

Danke dir.

EDIT: Sorry, ich HTML-Problem, Es gab zwei "Box" -Divs sowohl auf der linken als auch auf der rechten Seite. Sie hatten eine Auffüllung in%. Die linke Seite zeigte also mehr Auffüllung aufgrund der größeren Breite. Entschuldigung, das obige CSS funktioniert perfekt, es ist flüssig und behoben. Entschuldigung, dass Sie die falsche Frage gestellt haben ...

— Waleed
quelle

1

Es gab zwei Box Divs? Was ist ein Box Div? Diese Frage ist nicht klar.

— John Ktejik

250

Versuchen Sie stattdessen ein System wie dieses:

.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;
}

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

Erweitern Sie das Snippet

Sie müssen nur ein Div schweben lassen, wenn Sie den linken Rand auf dem anderen verwenden, der der Breite des ersten Div entspricht. Dies funktioniert unabhängig vom Zoom und hat keine Subpixel-Probleme.

— dezman
quelle

1

Es hilft nicht, das Zoomen ist jetzt behoben, heißt es behoben, aber das rechte Div ist jetzt nach unten geschoben und an dieser Position fixiert

— Waleed

Sie haben wahrscheinlich etwas durcheinander gebracht, Ihren Code überprüft oder mir den Link zur jsFiddle mitgeteilt und ihn sich nicht angesehen.

— Dekman

Oh Mann, es tut mir leid. Die Divs wurden bereits durch mein oben angegebenes CSS behoben, das ich gegeben habe. Es waren nur die "Box" -Divs auf der linken und rechten Seite, die Polsterung und Rand in% hatten, weil die rechte Div kurz war. Deshalb hatte sie ungleiche Polsterung und Ränder. Entschuldigung ...

— Waleed

Sollte das <section>nicht <div>stattdessen sein?

— Jvriesem

217

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>

Erweitern Sie das Snippet

— Christopher Moore
quelle

5

Schön, Flexbox ist definitiv der richtige Weg

— Julian Soro

4

Laut dieser Website sollte Flex in 94% der Browser funktionieren. caniuse.com/#search=flex

— Adrian

8

@JoostS sind nicht 94% der verschiedenen verfügbaren Browser (wie es immer auf Chrome, Mozilla, IE usw. usw. funktioniert), nicht dass es 94% der Zeit funktioniert, unabhängig vom Browser?

— Joe

6

Derzeit liegt es bei 97 +%. Grundsätzlich würde ich sagen, wenn Sie nicht auf IE8 abzielen müssen, entscheiden Sie sich für Flexbox, in diesem Fall und für andere. Flexbox-Lösungen sind fast immer eleganter und einfacher zu überlegen.

— Alan Thomas

6

Wenn Sie eine vorhandene Website haben, verwenden Sie niemals die Browserfreigabe. Sehen Sie sich Ihre eigenen Verkehrsprotokolle an. Auf den meisten meiner Websites macht IE8 nur etwa 0,01% des Datenverkehrs aus. Ich habe jedoch bestimmte Websites gesehen, auf denen Benutzer in Unternehmen, Behörden oder gemeinnützigen Organisationen sind, die viel ältere Software verwenden, und die Nutzung des alten IE-Browsers kann überraschend hoch sein.

— Cazort

95

Verwenden dieses CSS für meine aktuelle Site. Es funktioniert perfekt!

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

— Waleed
quelle

49

Schön zu hören, dass Sie Ihre eigene Antwort gefunden und akzeptiert haben, aber was ist #sides? Es ist nicht in Ihrer ursprünglichen Frage.

— JMD

2

Die Verwendung von float: left auf beiden untergeordneten Elementen (#right) beendet die Höhe des übergeordneten div (#wrapper). Diese Lösung hängt also von der Anforderung ab. Es ist besser, nur einem Kind den Wagen zu geben (# in Ihrem Fall übrig)

— Rahul Gandhi

8

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 der HTML:

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
</div>

— Malachi Bazar
quelle

3

Machen Sie beide Divs so. Dadurch werden beide Divs nebeneinander ausgerichtet.

.my-class {
  display : inline-flex;
}

— Coen Damen
quelle

1

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

<h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->

Erweitern Sie das Snippet

— CoolPerson879
quelle

Was ist der Grund für den Überlauf: versteckt? Es scheint nicht notwendig zu sein ...

— Honza

0

   <div style="height:50rem; width:100%; margin: auto;">
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left; background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
    <div style="height:50rem; width:20%; margin-left:4%; margin- 
    right:0%; float:left;  background-color: black;">

    </div>
   </div>

Rand rechts wird jedoch nicht benötigt.

— Towsif Ahmed Labib
quelle