CSS 디스플레이 테이블 너비 오버플로

내 페이지에 두 개의 요소가 신문 페이지의 기사와 같이 열에 배치되어 있습니다. 하나의 요소는 <aside> 태그이며, 내부 내용은 <section> 태그입니다.CSS 디스플레이 테이블 너비 오버플로

컨테이너의 너비가 100%으로 설정되어 있으면 컨테이너의 왼쪽 여백이 15 배이므로 뷰포트의 오른쪽으로 넘칠 수 있습니다. 어떻게하면 그 일을 막을 수 있습니까?

당신이 바이올린에서 예를 볼 수 있습니다

: http://jsfiddle.net/spryno724/BHr5F/2/이

참고 :는 내가이 작업을 수행하기 위해 calc() 기능을 사용할 수 있습니다 알고 있지만 its current browser support, 내 고객을 주어, 내가 준비가 안 것은 의존 이 함수에.

2013-08-21 Oliver Spryn

나는 그것을하지 않았다, 당신은 정교한 수 : 수평 스크롤 막대를 제거? –

@HashemQolami JSFiddle 링크를 살펴보면 모든 내용을 보려면 오른쪽으로 스크롤해야한다는 결과 창에서 볼 수 있습니다. 이는 margin-left : 15px와 width : 100 % 때문입니다. 창안에 내용을 맞추려고합니다. –

가장 쉬운 솔루션 대신의 셀에만 컨테이너에 패딩이 왼쪽으로 사용하는 것입니다 여백 왼쪽 내 업데이트 jsfiddle에서 볼 수있는 내용에 :

div.row { 
    background-color: rgba(51, 51, 51, 0.9); 
    display: table-row; 
    padding-left: 15px; 
}

http://jsfiddle.net/BHr5F/4/

출처

2013-08-21 21:04:38 Dragony

나는 그것을 시도했다. 사이드 바 왼쪽에있는 패딩이 사라진 것을 볼 수 있습니다. –

Here는있다 많은 좋은 답변. 내가 제일 좋아하는 것입니다 :

.container { 
    width:90%; 
    margin: auto; 
}

출처

2013-08-21 21:05:37 Joram

body 요소에 padding-left: 15px를 추가하고 section.container에서 여백 제거 :

body { 
    margin: 0; 
    padding-left: 15px; 
} 

section.container { 
    border: 1px solid black; 
    display: table; 
    max-width: 100%; 
    overflow: hidden; 
    table-layout: auto; 
    width: 100%; 
}

JSFiddle Demo #1

당신은 또한 폭 속성이 패딩을 포함 계산 box-sizing: border-box;을 사용할 수 있습니다 및 국경.

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

JSFiddle Demo #2

출처

2013-08-21 21:29:57

CSS 디스플레이 테이블 너비 오버플로

답변

관련 문제