유동 디스플레이: 나란히 배열된 두 개의 Div
P粉098979048
2023-08-27 12:48:00
<p>다음 CSS를 사용하여 두 개의 div를 나란히 배치하려고 합니다. </p>
<pre class="brush:css;toolbar:false;">#left {
왼쪽으로 뜨다;
너비: 65%;
오버플로: 숨김;
}
#오른쪽 {
오버플로: 숨김;
}
</pre>
<p>HTML은 매우 간단합니다. 래퍼 div에는 왼쪽과 오른쪽에 두 개의 div가 포함되어 있습니다. </p>
<pre class="brush:html;toolbar:false;"><div id="wrapper">
<div id="left">왼쪽 div</div>
<div id="right">오른쪽 div</div>
</div>
</pre>
<p>더 나은 방법을 찾기 위해 StackOverflow와 다른 사이트에서 여러 번 시도했지만 확실한 도움을 찾을 수 없었습니다. </p>
<p>첫눈에 코드가 제대로 작동하는 것 같습니다. 문제는 너비(%)를 늘리면 왼쪽 div가 자동으로 패딩/여백을 얻는다는 것입니다. 따라서 65% 너비에서 왼쪽 div에는 약간의 패딩이나 여백이 있고 오른쪽 div와 완벽하게 정렬되지 않았습니다. 패딩/여백을 0으로 설정하려고 시도했지만 성공하지 못했습니다. 둘째, 페이지를 확대하면 오른쪽 div가 왼쪽 div 아래로 미끄러지는데, 이는 디스플레이가 끊기는 것과 같습니다. </p>
<p>참고: 죄송합니다. 많은 정보를 확인했습니다. 이 질문은 여러 번 요청되었지만 이러한 답변은 나에게 도움이 되지 않았습니다. 내 경우에 문제가 무엇인지 설명했습니다. </p>
<p>이 문제가 해결되길 바랍니다. </p>
<p>감사합니다. </p>
<p>편집: HTML 문제로 인해 죄송합니다. 왼쪽과 오른쪽에 두 개의 "상자" div가 있고 패딩은 % 단위이므로 왼쪽에는 더 넓은 너비로 인해 더 많은 패딩이 표시됩니다. 죄송합니다. 위의 CSS는 완벽하게 작동하고 원활하게 표시되며 수정되었습니다. 잘못된 질문을 해서 죄송합니다...</p>
다음과 같은 시스템을 사용해 보세요:
첫 번째 div의 너비와 동일한 다른 div에 margin-left를 사용하는 경우 하나의 div만 플로팅하세요. 이는 확대/축소 정도에 관계없이 작동하며 하위 픽셀 문제는 없습니다.
현재 웹사이트에 이 CSS를 사용합니다. 효과는 완벽해요!
으아악