Div 상자의 Diving 상자

EasyCareBath.com에 바닥 글을 추가했는데 div가 ".footer_box"를 제외하고 올바르게 작동하도록 설정할 수 있습니다. 나는 "왼쪽 : 15 %"를 추가했으며, 창을 날려 버리면 더 이상 정렬되지 않습니다. 내가 뭔가를 놓치고 있거나 CSS에 너무 많이 했나요?Div 상자의 Diving 상자

.footer_spacer { 
    height: 50px; 
} 
.footer_wrapper { 
    height: 375px; 
    background-color: #e6dccb; 
} 
.footer { 
    border-top: 10px solid #789E65; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6); 
    margin-top: 0px; 
    /*min-width: 1007px;*/ 
    height: 235px; 
    background-attachment: scroll; 
    background-image: url(../images_footer/footer_bg.png); 
    background-repeat: repeat-x; 
    background-position: center top; 
    position: relative; 
} 
.footer_box { 
    height: 236px; 
    width: 1007px; 
    /*position: relative;*/ 
} 
.footer_copyright { 
    width: 100%; 
    /* [disabled]height: 100px; */ 
    /*float: left;*/ 
    padding-top: 15px; 
    position: relative; 
    text-align: center; 
    word-spacing: normal; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-weight: 100; 
    font-variant: normal; 
    text-transform: none; 
    color: #354245; 
} 
#footer_col_01 { 
    position:absolute; 
    left:11px; 
    top:3px; 
    width:164px; 
    /*height:230px;*/ 
    z-index:1; 
} 
#footer_col_02 { 
    position:absolute; 
    left:186px; 
    top:3px; 
    width:164px; 
    /*height:230px;*/ 
    z-index:1; 
} 
#footer_col_03 { 
    position:absolute; 
    left:361px; 
    top:3px; 
    width:164px; 
    /*height:230px;*/ 
    z-index:1; 
} 
#footer_col_04 { 
    position:absolute; 
    left:535px; 
    top:3px; 
    width:183px; 
    /*height:230px;*/ 
    z-index:1; 
} 
#footer_col_05 { 
    position:absolute; 
    left:728px; 
    top:3px; 
    width:265px; 
    /*height:230px;*/ 
    z-index:1; 
    font-size: 14px; 
} 
footer { 
    font-family: Arial, Helvetica, sans-serif; 
    color: #fff; 
    font-size: 11px; 
    float: left; 
    width: 100%; 
} 
footer a { 
    color: #FFF; 
    text-decoration: none; 
} 
footer a:hover { 
    color: #FFF; 
    text-decoration: underline; 
} 
footer h6 { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    font-weight: 500; 
    color: #00A1CC; 
    line-height: 46px; 
    /*margin-bottom: -2px;*/ 
} 
footer li { 
    line-height: 18px; 
    list-style-type: none; 
    margin-left: 12px; 
} 
.footer_img_center { 
    text-align: center; 
}

출처

2012-11-15 dgPehrson

미래에 http://jsfiddle.net의 jsfiddle에 마크 업에 CSS를 넣으면 더 빨리 도움을받을 수 있습니다. –

나는 이것이 왜 훼손되었는지 확실하지 않습니다 - 합법적 인 질문 인 것 같습니다. 아마 당신이 구시대가 될 실제 링크를 포함했기 때문에? 어느 쪽이든, 유효한 질문 인 것처럼 보이므로, 나는 대량 살상 무기에 대한 반대표를 던질 것입니다. :/ – Dave

는 다음과 같이 CSS를 수정 :

당신은 바른 길에 있었다

.footer_box { 
    height: 236px; 
    margin: 0 auto; 
    position: relative; 
    width: 1007px; 
}

출처

2012-11-15 15:30:48 LittleSweetSeas

완벽하게 작동합니다! 고맙습니다. – dgPehrson

이에 .footer_box 규칙을 변경합니다 :

.footer_box { 
    height: 236px; 
    width: 1007px; 
    margin: 0 auto; 
    position: relative; 
    }

margin: 0 auto; 가운데에 footer_box합니다.

position: relative;은 절대적으로 배치 된 열이 본문 대신 footer_box을 기반으로 배치되도록합니다.

사이드 노트/내가 항상 좋아했던 비유 : 페이지 가장자리에 연결된 항목의 측면에 고무 밴드를 부착하는 것으로 '자동'이라고 생각하면 ...이 경우 '자동' 왼쪽과 오른쪽에서 고무 밴드가 당겨지면 화면 크기에 관계없이 항상 중앙에 위치합니다.

출처

2012-11-15 15:30:29 Dave

당신은 최고입니다! 완벽하게 작동했습니다! 비슷한 대답을 보았지만 "위치 : 상대"와 "여백"을 다시는 포함하지 않았습니다! – dgPehrson

이 답변은 사실입니다. 추가하기 만하면 0이 0이기 때문에 기술적으로 0이면 "px"가 필요하지 않습니다. 어떤 단위 및 외형도 사용하지 않아도됩니다. – Andy

@Andy - yah - 'px'는 필요하지 않습니다. 깨진 적이없는 습관뿐입니다. 여전히 'px'로 보이는 방식이 마음에 들지만, 어쩌면 깨뜨릴 수 있습니다. :) (나는 대답에서 그것을 제거 할 것이다) 고마워. – Dave

.footer_box { 
    height: 236px; 
    width: 1007px; 
    position: relative; 
    margin: 0px auto; 
}

에 자동 마진 왼쪽과 오른쪽 바닥 글은 항상 상관없이, 중심 없습니다되어 있는지 확인합니다 화면 크기는

출처

2012-11-15 15:32:19

Div 상자의 Diving 상자

답변

관련 문제