<!DOCTYPE html>
<html>
<head>
<title>Width issue</title>
<style type="text/css">
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
}
#right {
width: 50%;
background: orange;
display: inline-block;
}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>
JSFiddle : http://jsfiddle.net/5EcPK/
위 코드는 #left div와 #right div를 나란히 하나의 행에 배치하려고합니다. 그러나 위의 JSFiddle URL에서 볼 수 있듯이 이것은 사실이 아닙니다.
div 중 하나의 너비를 49 %로 줄이는 문제를 해결할 수 있습니다. http://jsfiddle.net/mUKSC/를 참조하십시오 . 그러나 이것은 두 div 사이에 작은 간격이 나타나기 때문에 이상적인 솔루션이 아닙니다.
문제를 해결할 수있는 또 다른 방법은 두 div를 모두 플로팅하는 것입니다. http://jsfiddle.net/VptQm/을 참조하십시오 . 이것은 잘 작동합니다.
그러나 나의 원래 질문은 남아 있습니다. 두 div가 인라인 블록 요소로 유지 될 때 왜 나란히 맞지 않습니까?
답변
inline-block요소를 사용할 때 항상 whitespace 해당 요소 사이 에 문제가 있습니다 (이 공간은 약 4px 너비입니다).
따라서 divs둘 다 너비가 50 %이고 그 whitespace(~ 4px) 너비가 100 % 이상이므로 끊어집니다. 문제의 예 :
이를 해결하는 몇 가지 방법이 있습니다.
1. 이러한 요소 사이에 공백이 없습니다.
2. HTML 주석 사용
3. 부모 font-size를로 설정 한 0다음 inline-block요소에 값 추가
4. 그들 사이에 음수 여백 사용 ( 바람직하지 않음 )
5. 폐쇄 각도 감소
6. 특정 HTML 닫기 태그 건너 뛰기 ( 참조를 위해 @thirtydot에게 감사드립니다 )
참조 :
으로 MarcosPérezGude는 @ 말했다 의 가장 좋은 방법은 사용하는 것입니다 rem, 그리고 몇 가지 기본 가치를 font-size온 html(처럼 태그 HTML5Boilerplate ). 예:
html{
font-size: 1em;
}
.ib-parent{ /* ib -> inline-block */
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
업데이트 : 거의 2018 년입니다. flexbox 또는 더 나은 CSS 그리드 레이아웃을 사용 하세요.
답변
css3의 좋은 대답은 다음과 같습니다.
white-space: nowrap;
부모 노드 및 :
white-space: normal;
vertical-align: top;
div (또는 기타)에서 50 %
예 : http://jsfiddle.net/YpTMh/19/
편집하다:
다른 방법이 있습니다.
font-size: 0;
부모 노드의 경우 자식 노드에서 재정의
답변
두 div 사이의 공백이 공백으로 해석되기 때문입니다. <div>아래 그림과 같이 태그를 줄에 넣으면 문제가 해결됩니다 .
<div id="left"></div><div id="right"></div>
답변
요소 사이에 공간이 있기 때문입니다. 모든 공백을 제거하면, 그들은 맞습니다 .
<div id="left">Left</div><div id="right">Right</div>
답변
인라인 블록 대신 블록으로 만드십시오. 이것은 그들 사이의 공백을 무시하는 div를 렌더링합니다.
display:block;
또는 태그 사이의 공백 제거
<div id='left'></div><div id='right'></div>
또는 추가
margin: -1en;
렌더링 된 단일 공간이 차지하는 공간을 줄이기 위해 div 중 하나에.
답변
아래 코드를 확인하십시오 :
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
float:left;
}
#right {
width: 50%;
background: orange;
display: inline-block;
float:left;
}<div id="left">Left</div>
<div id="right">Right</div>답변
Flexbox 예제-두 개의 나란히있는 요소를 보유하는 상위 클래스에 사용됩니다.
.parentclass {
display: flex;
justify-content: center;
align-items: center;
}
