Flüssige Darstellung: zwei Divs nebeneinander angeordnet

Question

Ich versuche zwei Divs nebeneinander zu platzieren und verwende das folgende CSS.

#left {
  schweben: links;
  Breite: 65 %;
  Überlauf versteckt;
}

#Rechts {
  Überlauf versteckt;
}

HTML ist sehr einfach, ein Wrapper-Div enthält zwei Divs links und rechts.

<div id="wrapper">
  <div id="left">Linke Seite div</div>
  <div id="right">Rechte Seite div</div>
</div>

Ich habe viele Male auf StackOverflow und anderen Websites versucht, einen besseren Weg zu finden, konnte aber keine konkrete Hilfe finden.

Auf den ersten Blick funktioniert der Code also gut. Das Problem ist, dass, wenn ich die Breite (%) erhöhe, das linke Div automatisch einen Abstand/Rand erhält. Bei einer Breite von 65 % hat das linke Div also einen gewissen Abstand oder Rand und ist nicht perfekt mit dem rechten Div ausgerichtet. Ich habe versucht, den Abstand/Rand auf 0 zu setzen, ohne Erfolg. Zweitens: Wenn ich die Seite vergrößere, verschiebt sich das rechte Div unter das linke Div, was einer stotternden Anzeige gleicht.

Hinweis: Entschuldigung, ich habe viele Informationen überprüft. Diese Frage wurde schon oft gestellt, aber diese Antworten haben mir nicht geholfen. Ich habe erklärt, was in meinem Fall das Problem war.

Ich hoffe, dass das Problem gelöst werden kann.

Vielen Dank.

Bearbeiten: Entschuldigung für mein HTML-Problem, es gibt links und rechts zwei „Box“-Divs, ihre Auffüllung erfolgt in %, sodass die linke Seite aufgrund der größeren Breite mehr Auffüllung zeigt. Tut mir leid, das obige CSS funktioniert einwandfrei, es wird reibungslos angezeigt und ist repariert. Tut mir leid, dass ich die falsche Frage gestellt habe ...

Answer 1

尝试这样的系统：

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

如果您在另一个 div 上使用 margin-left 等于第一个 div 的宽度，则只需浮动一个 div 即可。无论缩放多少，这都可以工作，并且不会出现子像素问题。

Answer 2

将此 CSS 用于我当前的网站。效果完美！

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