나란히 두 div-유체 표시

두 개의 div를 나란히 배치하고 다음 CSS를 사용하려고합니다.

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

#right {
  overflow: hidden;
}

HTML은 래퍼 div에서 단순하고 두 개의 왼쪽 및 오른쪽 div입니다.

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

StackOverflow 및 다른 사이트에서도 더 나은 방법을 찾기 위해 여러 번 시도했지만 정확한 도움을 찾을 수 없었습니다.

따라서 코드는 언뜻보기에 잘 작동합니다. 문제는 너비를 (%) 늘리면 왼쪽 div가 자동으로 패딩 / 여백을 얻는다는 것입니다. 따라서 65 % 너비에서 왼쪽 div에 패딩이나 여백이 있고 오른쪽 div와 완벽하게 정렬되지 않았습니다. 패딩 / 여백 0을 시도했지만 운이 없습니다. 둘째, 페이지를 확대하면 오른쪽 div가 왼쪽 div 아래로 미끄러집니다. 유체 표시가 아닌 것 같습니다.

참고 : 죄송합니다. 많이 검색했습니다. 이 질문은 여러 번 요청되었지만 그 대답은 저에게 도움이되지 않습니다. 나는 내 경우에 문제가 무엇인지 설명했다.

그에 대한 해결책이 있기를 바랍니다.

감사합니다.

편집 : 죄송합니다, HTML 문제입니다. 왼쪽과 오른쪽에 두 개의 "상자"div가 있었고 %로 패딩이 있었으므로 왼쪽은 더 큰 너비로 인해 더 많은 패딩을 보였습니다. 죄송합니다. 위의 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;
}

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

첫 번째 div의 너비와 같은 나머지에 margin-left를 사용하는 경우 하나의 div 만 플로팅하면됩니다. 이것은 줌에 상관없이 작동하며 서브 픽셀 문제가 없습니다.

flexbox를 사용하면 쉽습니다.

#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>

현재 사이트에이 CSS를 사용합니다. 완벽하게 작동합니다!

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

인터넷 검색에 대한 답변은 다음과 같습니다.

CSS :

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

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

HTML은 다음과 같습니다.

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

두 div를 이렇게 만드십시오. 이렇게하면 두 div가 나란히 정렬됩니다.

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

   <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>

그러나 마진 오른쪽은 필요하지 않습니다.