2 divs를 하나의 div로 표시되도록 나란히 배치해야합니다.

Question

핑크색 컨테이너가 있고 내부에 디스플레이가있는 2 개의 div, 빨간색과 녹색이 나란히 있습니다. inline-block; css.i의 규칙은 50 % 너비로 50 % 너비를 취해야하므로이 div가 하나의 div.but로 나타나야합니다. 너비를 50 %로 설정하면 녹색 div.when에서 너비를 49 %로 설정하면 점프됩니다. 라인 사이지만 그 사이에 틈이 있는데, 내가 원하는 것, 신체의 도움이되지 않습니다.

마치 하나의 div로 나타나는 것처럼 한 줄에 togather를 붙여야합니다. 난 여기에 내 코드 펜 링크 ...이 알려진 문제 마진 원인 inline-block 요소 사이의 공백을 표시하는 것입니다

<div class="container"> 
    <div class="box"> 
    </div> 
    <div class="box2"> 
    </div> 
</div> 

CSS

.container{ 
width:800px; 
height:800px; 
background-color:pink; 
} 
.box{ 
display:inline-block; 
width:50%; 
height:50px; 
background-color:red; 
} 
.box2{ 
display:inline-block; 
width:50%; 
height:50px; 
background-color:green; 
} 

Answer 1

우리 코드의 문제점은 HTML이 컨테이너의 상자 요소 사이의 공백을 감지한다는 것입니다. 따라서 50 % 너비의 2 Divs에 대한 컨테이너 공간이 충분하지 않은 것처럼 보입니다. - 48 % 또는 그보다 작은 값으로 설정하면 라인 사이에 맞을 것입니다.

.container{ 
 
    width:800px; 
 
    height:800px; 
 
    background-color:pink; 
 
    display:inline-block; 
 
font-size: 0; 
 
} 
 

 

 
.box{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:red; 
 
} 
 
.box2{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:green; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box2"> 
 
    </div> 
 
</div>

다음

Answer 2

http://codepen.io/ShamZ/pen/gLXBow HTML을 넣을 수 있습니다. 이 예를 살펴 상기 대안 필요할 수 홀수 간격을 초래할 수 http://codepen.io/davewallace/pen/aBVQLN

inline-block 람, 플로트에

.container{ 
 
width:800px; 
 
height:800px; 
 
background-color:pink; 
 
} 
 
.box{ 
 
display:inline-block; 
 
width:50%; 
 
height:50px; 
 
background-color:red; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.box:nth-of-type(2) { 
 
    background-color: green; 
 
    }

<div class="container"> 
 
    <div class="box"> 
 
    </div><div class="box"> 
 
    </div> 
 
</div>

Answer 3

스위치 (고정).

플로트를 사용하면 원하는 효과를 얻을 수 있습니다. 플로팅 요소를 래핑하는 컨테이너에서 'clearfix'를 사용하여 조사해야 할 수도 있습니다.

Answer 4

는 부모 요소 .container

.container{ 
 
    width:800px; 
 
    height:800px; 
 
    background-color:pink; 
 
    font-size:0; 
 
} 
 

 

 
.box{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:red; 
 
} 
 
.box2{ 
 
    display:inline-block; 
 
    width:50%; 
 
    height:50px; 
 
    background-color:green; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="box2"> 
 
    </div> 
 
</div>

에 font-size:0 추가 하위 요소에서 다른 글꼴 크기를 설정합니다

하나의 해결책이 될 수 있습니다