나란히 2개의 다이브 - 유체 디스플레이

나란히 2개의 다이브 - 유체 디스플레이

나는 두 개의 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 및 다른 사이트에서도 더 나은 방법을 찾기 위해 여러 번 시도했지만 정확한 도움말을 찾을 수 없었습니다.

그래서 코드는 언뜻 보기에 잘 작동합니다.문제는 (%)에서 너비를 늘리면 왼쪽 점이 패딩/마진을 자동으로 얻는다는 것입니다.그래서, 65% 너비에서, 왼쪽 div는 약간의 패딩이나 마진이 있고 오른쪽 div와 완벽하게 정렬되지 않았습니다. 저는 패딩/마진 0을 시도했지만 운이 없었습니다.두 번째로, 제가 페이지를 확대하면, 오른쪽 div가 왼쪽 div 아래로 미끄러집니다. 이것은 유동적이지 않은 디스플레이와 같습니다.

참고: 죄송합니다. 검색을 많이 했습니다.이 질문은 여러 번 있었지만 그 대답들은 나에게 도움이 되지 않습니다.저는 제 경우에 어떤 문제가 있는지 설명했습니다.

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

감사해요.

편집: 죄송합니다, HTML 문제입니다. 왼쪽과 오른쪽에 모두 두 개의 "박스" 디브가 있었습니다. 그들은 %의 패딩을 가지고 있었습니다. 그래서 왼쪽은 더 큰 폭으로 인해 더 많은 패딩을 보였습니다.죄송합니다, 위의 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의 너비와 동일한 여백 왼쪽을 사용하는 경우에는 하나의 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>

두 개의 디브를 이렇게 만듭니다.이렇게 하면 양쪽 디브가 나란히 정렬됩니다.

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

그리드 보기를 사용할 수도 있습니다. 또한 다음과 같은 응답 기능도 사용할 수 있습니다.

#wrapper {
   width: auto;
    height: auto;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
}

#left{
    text-align: left;
    grid-column: 1/4;
}

#right {
    text-align: right;
    grid-column: 4/6;
}

그리고 HTML은 다음과 같이 되어야 합니다.

<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>

자세한 내용은 다음 링크를 참조하십시오.

https://www.w3schools.com/css/css_rwd_grid.asp

나는 꽤 새로운 것이지만 나는 내 작은 경험을 공유할 수 있다고 생각했습니다.

#wrapper{
  display: grid;
  grid-template-columns: 65% 1fr;
}
#left {
  grid-column:1;
  overflow: hidden;
  border: 2px red solid;
}

#right {
  grid-column:2;
  overflow: hidden;
  border: 2px blue solid;
}

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

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

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

하지만 마진 권리는 필요하지 않습니다.

.container {
  display: flex;
}

.box1, .box2 {
  flex: 1;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="box1">Div 1 </div>
  <div class="box2">Div 2 </div>
</div>

언급URL : https://stackoverflow.com/questions/17217766/two-divs-side-by-side-fluid-display