인라인 두 divs 나란히 - CSS

Question

두 50 % 각 div하지만 어떻게 든 그것의 동일한 행에 나타나지 않는 배치하려고하지만 내가 49 % 할 경우 같은 행에 스택. 아무도 코드 (내가 솔루션보다 원인을 알기에 관심이있는)에 문제가 있음을 알려주시겠습니까?

CSS -

* { 
    padding: 0; 
    margin: 0; 
} 
.wrapper { 
    width: 100%; 
} 

.left-c { 
    width: 50%; 
    background: #3EF00C; 
    display: inline-block; 
} 

.right-c { 
    width: 50%; 
    background: #2E4E6E; 
    display: inline-block; 
} 

HTML -

<div class="wrapper"> 
    <div class="left-c"> 
     <p>LEFT ----- This is going to be some random text placed in a a left container inside the wrapper. I hope this text will suffice the requirement.</p> 
    </div> 
    <div class="right-c"> 
     <p>This is going to be some random text placed in a a right container inside the wrapper. I hope this text will suffice the requirement. ----- RIGHT</p> 
    </div> 
</div> 

JS 바이올린 - https://jsfiddle.net/no0chhty/1/

Answer 1

를 확인하시기 바랍니다. 불행히도 공백 문자를 포함하여 문서 공백을 고려합니다. 이에 대한 해결책은 여러 가지가 있지만, 사용하려는 경향은 부모 요소를 font-size: 0으로 설정 한 다음 인라인 블록의 글꼴 크기를 원하는 값으로 재설정하는 것입니다.

여기에 대해 자세히 알아보기 : https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

플로트 추가 : 왼쪽; 클래스 "왼쪽 C"에

.left-c { 
      width: 50%; 
      background: #3EF00C; 
      display: inline-block; 
     float:left; 
     } 

이 유형 inline-block의 요소와 고전적인 문제이다 FIDDLE

Answer 3

이 CSS를

* { 
    padding: 0; 
    margin: 0; 
} 
    .wrapper { 
    width: 100%; 
    display:flex 
    } 

    .left-c { 
    width: 50%; 
    background: #3EF00C; 
    } 

    .right-c { 
    width: 50%; 
    background: #2E4E6E; 
    } 

을 대체

Answer 4

안녕하세요 대신에 당신이 떠 나 같은 플렉스 수 인라인 블록 : 여기 https://jsfiddle.net/JentiDabhi/r9s3z07e/

CSS

링크를

.left-c { 
    background: #3ef00c none repeat scroll 0 0; 
    float: left; 
    width: 50%; 
} 

Answer 5

<div class="wrapper"> 
    <div class="left-c"><p></p></div><!----><div class="right-c"><p></p></div> 
</div> 

코멘트를 왼쪽 -c의 닫는 태그와 오른쪽 -c의 여는 태그 사이에 넣으면이 문제를 해결할 것입니다. 그래서 같은 두 섹션에 대한

Example

Answer 6

변경 display: inline-block 에 display: table-cell :

.left-c { 
    width: 50%; 
    background: #3EF00C; 
    display: table-cell; 
} 

.right-c { 
    width: 50%; 
    /* 49% works well */ 
    background: #2E4E6E; 
    display: table-cell; 
} 

이

Here is the JSFiddle demo