너비를 백분율로 표시하는 인라인 블록

inline-block과 너비를 백분율로 사용하여 서로 옆에 두 개의 섹션을 넣으려고하지만 내 창 전체 너비가 채워지지 않습니다. 내 화면에 소수점까지 정확한 비율을 해결하지 않는 한너비를 백분율로 표시하는 인라인 블록

이

HTML

<section class="left-content"> 
    "Some Code" 
</section> 
<section class="main-content"> 
    "Some More Code" 
</section>

CSS는

.left-content, .right-content { 
    width: 15%; 
    min-width: 150px; 
    padding: 5px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
} 
.main-content { 
    width: 85%; 
    min-width: 712px; 
    padding: 10px; 
    display: inline-block; 
    overflow: hidden; 
    vertical-align: top; 
}

하지만 그렇지 않은 : 내가 지금까지 가지고

작업. 누구든지 inline-block을 사용하여이를 수행하는 방법을 알고 있습니까? 아니면 float을 사용해야합니까?

출처

2013-09-21 dpDesignz

일반적으로 요소 사이에 실제 공간이 있기 때문에 일반적으로 발견되었습니다. 마크 업에서 요소 사이의 공백을 제거하거나 상위에서'font-size : 0'을 설정 한 다음 요소 자체에서 글꼴을 복원 할 수 있습니다. – Chad

HTML 태그의 공백과 줄 바꿈으로 인해이 문제가 발생합니다. 은 "문제"를 해결하려면 다음 두 가지 옵션이 있습니다 :
1. '0'

에 부모 요소의 font-size을 설정
2. 코드에서 줄 바꿈과 공백을 제거 또한 당신이 box-sizing: border-box을 설정해야 ?

출처

2013-09-21 14:20:04 Netsurfer

감사합니다. 글꼴 크기를 다시 설정해야하는 고통입니다. :) – dpDesignz

예 ;-) 단점이없는 방법은 없습니다. '수레'를 사용하는 대안은 더 좋지 않습니다 ...! 당신은 두 가지 중 적은 것 중에서 선택의 여지가 있습니다. – Netsurfer

올바른 방향으로 나를 가리켜 주셔서 고마워요,하지만 왜 그냥 HTML의 공백을 삭제하지. 그의 경우 : [code] ...

... [more code] –

너비를 백분율로 표시하는 인라인 블록

답변

관련 문제