너비가 각각 50 % 인 두 개의 인라인 블록 요소가 한 행에 나란히 맞지 않습니다.
<!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 % 이상이므로 끊어집니다. 문제의 예 :
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div>
<div class="right">bar</div>이를 수정하는 몇 가지 방법이 있습니다.
1. 이러한 요소 사이에 공백이 없습니다.
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div><div class="right">bar</div>2. HTML 주석 사용
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div><!--
--><div class="right">bar</div>3. 부모 font-size를로 설정 한 0다음 inline-block요소에 값 추가
body{
margin: 0; /* removing the default body margin */
}
.parent{
font-size: 0; /* parent value */
}
.parent > div{
display: inline-block;
width: 50%;
font-size: 16px; /* some value */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>4. 그들 사이에 음수 여백 사용 ( 바람직하지 않음 )
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
margin-right: -4px; /* negative margin */
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div>
<div class="right">bar</div>5. 폐쇄 각도 감소
body{
margin: 0; /* removing the default body margin */
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<div class="left">foo</div
><div class="right">bar</div>
<hr>
<div class="left">foo</div><div class="right">
bar</div>6. 특정 HTML 닫기 태그 건너 뛰기 ( 참조를 위해 @thirtydot에게 감사드립니다 )
body{
margin: 0; /* removing the default body margin */
}
ul{
margin: 0; /* removing the default ul margin */
padding: 0; /* removing the default ul padding */
}
li{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}<ul>
<li class="left">foo
<li class="right">bar
</ul>참조 :
- CSS 트릭에서 인라인 블록 요소 사이의 공간 싸움
- Remove Whitespace Between Inline-Block Elements by David Walsh
- How to remove the space between inline-block elements?
As @MarcosPérezGude said, the best way is to use rem, and add some default value to font-size on the html tag (like in HTML5Boilerplate). Example:
html{
font-size: 1em;
}
.ib-parent{ /* ib -> inline-block */
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
Update: as it's nearly 2018. , use flexbox or even better - CSS grid layout.
good answer in css3 is:
white-space: nowrap;
in parent node, and :
white-space: normal;
vertical-align: top;
in div (or other) at 50%
exemple : http://jsfiddle.net/YpTMh/19/
EDIT:
there is another way with :
font-size: 0;
for parent node and override it in child node
It's because the whitespace between your two divs is being interpreted as a space. If you put your <div> tags in line as shown below the problem is corrected:
<div id="left"></div><div id="right"></div>
Because there is a space between the elements. If you remove all whitespace, they will fit.
<div id="left">Left</div><div id="right">Right</div>
Either make them block instead of inline-block. This will render divs ignoring spaces between them.
display:block;
or remove space between tags
<div id='left'></div><div id='right'></div>
or add
margin: -1en;
to one of the divs in order to mitigate space taken by single space rendered.
It can be done by adding the css display:inline to the div that holds the inline elements.
While removing the white space using margin with a negative value it becomes necessary to add it to this particular element. As adding it to a class will affect places where this class has been used.
So it would be safer to use display:inline;
Please check below code:
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 example - this would be used for the parent class holding the two side by side elements.
.parentclass {
display: flex;
justify-content: center;
align-items: center;
}
Taken from Vertically centering a div inside another div
add float: left; to both div tags.
div {
float: left;
}'development' 카테고리의 다른 글
| Git 하위 트리-최신 하위 트리이지만 푸시 할 수 없음 (0) | 2020.10.07 |
|---|---|
| ARC의 NSString에서 CFStringRef로, CFStringRef에서 NSString으로? (0) | 2020.10.07 |
| Boost assert.hpp 파일에서 P :: ************는 무엇을 의미합니까? (0) | 2020.10.07 |
| numpy 배열에서 행 삭제 (0) | 2020.10.07 |
| 페이지의 아무 곳에서나 누른 Enter 키 캡처 (0) | 2020.10.07 |