div의 전체 너비 배경색

1120px CSS 반응 프레임 워크를 반응 적으로 사용하고 있거나 필요에 따라 고정 격자로 사용할 수 있습니다.div의 전체 너비 배경색

전체 너비 배경색을 적용하려는 1120 픽셀 컨테이너 div 안에 div가 있습니다.

div의 배경색은 물론 컨테이너 div 내부에만 있고 body 요소의 전체 너비를 채우고 싶습니다.

이제 문제는 div가 자동으로 짧은 코드로 생성되어 외부 div를 만들고 100 % 너비로 설정할 수 없다는 것입니다.

<div class="toggle-default"> 
    <div class="toggle"> 
<div class="toggle_title toggle_active">LINE-UP</div> 
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div> 

</div> 
    </div>

이 CSS : 여기

이 (가) 단축 코드에서 마크 업입니다

.toggle{ margin-bottom: 5px; 
clear: both; float: left; 
position: relative; 
width: 100%;     
} 
.toggle .toggle_title { 
position: relative; 
font-size: 112.5%; 
font-weight: 700; 
padding-bottom: 15px; 
padding-left: 25px; 
text-decoration: none; 

}

여기 지금 FIDDLE

이다, 문제는이 마크 업이 아래에 있다는 것이다 컨테이너 div는 1120 픽셀 너비입니다. 나는 덧붙일 생각이었습니다 .toggle .toggle_title 직위 : 절대; 예를 들어 1480px의 최소 너비를 설정하면 모든 것이 중단됩니다.

이 문제에 대한 더 나은 접근 방법이라고 확신합니다. 누군가이 작품을 만드는 방법에 대한 조언을 해 줄 수 있습니까? 감사합니다.

출처

2013-04-09 agis

http://www.jsfiddle.net 사실에 진행 상황을 보여 주면 더 많은 답변을 얻을 수 있습니다. – herinkc

'body' 요소에 배경색을 설정하는 것을 선호하지 않습니까? – pzin

배경색을 어느 div에 적용 하시겠습니까? – vtacreative

이렇게하는 것은 정말 못 생깁니다. 나는 이것을 downvoting 누군가의 기대와 함께 게시하고 있지만 ... 작동합니다. 다만 폭이 예상 화면 해상도와 위치를 두 배 크기를 사업부 전에 널 콘텐츠를 추가, 기본적으로

.toggle_title, .toggle_content { 
    position:relative; 
    z-index:2; 
} 

.toggle:before { 
    content:""; 
    width:4000px; 
    position:absolute; 
    height:100%; 
    background-color:red; 
    left:-50%; 
    z-index:1 
}

: 그것은 http://jsfiddle.net/5mn22/8/

당신의 CSS에이 추가를 위해 여기

은 바이올린의 왼쪽으로 50 %가 전체 거리를 늘리는 지 확인하십시오.

당신은 어떻게 생각하십니까?

출처

2013-04-09 21:51:29 ntgCleaner

요소를 스타일 지정하는 경우 의미에 신경 쓰지 않아도됩니다. 하지만이 모든 주요 브라우저에서 작동합니까? – agis

: CSS2 +로 작업하기 전과 후에 : http://www.w3schools.com/cssref/css_selectors.asp 및 z-index는 모든 주요 브라우저에서 작동합니다. 당신은 단지 z-index 수 없습니다 : ie7로 상속 - http://www.w3schools.com/cssref/pr_pos_z-index.asp – ntgCleaner

고마워요! 이제 작은 질문입니다 : nth-child() 속성을 사용하는 요소에 대해 다른 배경을 갖는 방법은 무엇입니까? 첫 번째 토글에는 빨간색 배경과 두 번째 파란색이 있습니다. – agis

background-color 대신 다른 변경 CSS 매개 변수를 사용해보십시오. 내가 :box-shadow parametr으로 테스트 한 : 사용

.toggle { 
     box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42; 
     -webkit-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42; 
     -moz-box-shadow: -10vw 0px 0px 0px #0e1d42, -28vw 0px 0px 0px #0e1d42, -42vw 0px 0px 0px #0e1d42, -30vw 0px 0px 0px #0e1d42, -46vw 0px 0px 0px #0e1d42, -15vw 0px 0px 0px #0e1d42; 
}

라이브 예 (파란색 행)^http://kreditka.testovi-site.pw

감사를 살펴 보자 최대

출처

2017-10-29 15:24:28

div의 전체 너비 배경색

답변

관련 문제