두 개의 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;
}
답변
#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>
그러나 마진 오른쪽은 필요하지 않습니다.