너비가 각각 50 % 인 두 개의 인라인 블록 요소가 한 행에 나란히 맞지 않습니다.

Question 1

<!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가 인라인 블록 요소로 유지 될 때 왜 나란히 맞지 않습니까?

Question 2

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>

스 니펫 확장

참조 :

으로 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 그리드 레이아웃을 사용 하세요.

Question 3

css3의 좋은 대답은 다음과 같습니다.

white-space: nowrap;

부모 노드 및 :

white-space: normal;
vertical-align: top;

div (또는 기타)에서 50 %

예 : http://jsfiddle.net/YpTMh/19/

편집하다:

다른 방법이 있습니다.

font-size: 0;

부모 노드의 경우 자식 노드에서 재정의

Question 4

두 div 사이의 공백이 공백으로 해석되기 때문입니다. <div>아래 그림과 같이 태그를 줄에 넣으면 문제가 해결됩니다 .

<div id="left"></div><div id="right"></div>

Question 5

요소 사이에 공간이 있기 때문입니다. 모든 공백을 제거하면, 그들은 맞습니다 .

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

Question 6

인라인 블록 대신 블록으로 만드십시오. 이것은 그들 사이의 공백을 무시하는 div를 렌더링합니다.

display:block;

또는 태그 사이의 공백 제거

<div id='left'></div><div id='right'></div>

또는 추가

margin: -1en;

렌더링 된 단일 공간이 차지하는 공간을 줄이기 위해 div 중 하나에.

Question 7

아래 코드를 확인하십시오 :

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>

스 니펫 확장

Question 8

Flexbox 예제-두 개의 나란히있는 요소를 보유하는 상위 클래스에 사용됩니다.

.parentclass {
  display: flex;
  justify-content: center;
  align-items: center; 
}

다른 div 내부의 div 를 세로로 중앙에서 가져옴

Question 9

인라인 요소를 보유하는 div에 css display : inline을 추가하여 수행 할 수 있습니다.

여백을 음수 값으로 사용하여 제거하는 동안이 특정 요소에 추가해야합니다. 클래스에 추가하면이 클래스가 사용 된 장소에 영향을 미칩니다.

따라서 display : inline을 사용하는 것이 더 안전 할 것입니다.

Question 10

플로트 추가 : 왼쪽; 두 div 태그에.

div {
  float: left;
}

스 니펫 확장