간단한 CSS 편집

나는 내 머리를 잡지 못하는 간단한 쿼리를 가지고있다. 이미지를 내 'nav'div에 넣고 빨간색 & 흰색 상자가 포함되어 있습니다. 나는 내 콘텐츠가 갈 것이지만 이전 div의 이미지 길이와 일치하지 않는 'nav'div 다음에 'content'div를 만들었습니다. 보다 선명한 그림을 보려면 this link을 참조하십시오. 간단한 CSS 편집

<body> 
<div id="wrap"> 

    <div id="header"> 
     <!-- LOGO GOES HERE --> 
    </div> 

    <div id="nav"> 
     <img src="images/nav.png" width="1076" height="99" /> 
    </div> 

    <div id="content"> 
     HOW DO I ALIGN THIS DIV TO MATCH THE LENGTH OF THE WHITE BOX ABOVE? 
    </div> 

</div><!--End of wrap -->

body { 
    background-color:#d3d1d1; 
    margin:0 auto; 
} 

#wrap { 
    width:1076px; 
    margin:auto; 
} 

#content { 
    background-color:white; 

}

출처

2013-05-30 Jahed Hussain

.. 새'div # main'에서'.nav' – Kermit

을'# nav'와'# content'로 감싸고 모든 정렬 속성을 부여하십시오. – Sourabh

에는 다음과 같은 속성이 추가 : 당신은 테두리가이를 보상 할 수 이것은 #content 상자 이미지의 공백와 동일한 크기로 만들 것입니다

width: 1029px (I find it looks better than 1028px, but you can try both) 
margin-left: 22px

를, 그것은 것입니다 그것들을 양쪽 모두 같은 지점에서 시작하도록 정렬하십시오.

출처

2013-05-30 23:29:25

나는 이것이 창 크기 조정에 실패 할 것이라고 생각한다. – Sourabh

동의하지만, 지금 당장 웹 사이트는 반응 적으로 코드화되지 않는다. (예 : 이미지의 너비가 고정되어있다.) 크기를 조정할 수 있도록하려는 경우 'nav'의 이미지와 'content'의 둘 다에서 px 대신 너비로 %를 사용하는 것이 가장 좋습니다. –

-1

로 #content CSS의 변경이 어떻게 작동

#content { 
    background-color: white; 
    margin-left: 22px; 
    width: 1028px; 
}

: 여백이 콘텐츠 상자의 왼쪽 정렬로 설정됩니다. 너비가 이미지의 흰색 상자와 일치 할 때까지 늘립니다.

편집 제거 불필요한 왼쪽 위치 의견

출처

2013-05-30 23:22:40 Fallexe

왼쪽 및 * 오른쪽에 여백을 추가하는 것이 아니라 ...이 방법은 상대적 위치 지정과 지나치게 복잡합니다. –

저는 대개 SCSS를 사용합니다. 하위 요소의 너비를 결정하는 데 사용할 수있는 변수로 너비를 저장하고 싶습니다. 그래서 개인적인 취향. – Fallexe

을 지적 #content에 다음과 같은 규칙을 넣어 : 이미지가 들쭉날쭉 부드러운 가장자리를 가지고 있기 때문에

margin: 0 25px 0 22px;

그것은 여전히 비록 추한 모양을 권리. #content에

#content { 
    margin: 0 25px 0 22px; 
    border-right: 1px solid #eee; 
}

출처

2013-05-30 23:22:59

최상의 아이디어 - 이미지에서 공백을 제거한 다음 전체를 흰색으로 만듭니다. 여백을 사용하여 위쪽 여백을 추가하고, 왼쪽, 오른쪽 및 가운데에 내용을 배치합니다. 0 자동;

출처

2013-05-30 23:30:33 Ani

당신은 맨 위의 '패딩'을 의미합니다. 그리고 id는'nav'입니다. 아마도 공백이 일시적 일 것입니다. – Sourabh

죄송합니다! Thanks Saurabh – Ani

그러나 이미지를 사용하여 공백을 추가하는 것은 이해가되지 않습니다. 배경을 흰색으로 쉽게 추가하고 그에 따라 쉽게 조정할 수 있습니다. – Ani

이미지가 실제로 가운데에 있지 않은 것으로 보입니다. 작은 비트는 평평하지 않습니다. 그래서, 그것은 내 대답을 던질 수있는 첫 번째 문제입니다. 간단한 대답이다

#content { 
    margin: 0 auto; /* this centers the div | 0 margin top/bottom auto on sides */ 
    width: 100%; 
    max-width: 1030px; /* this needs to be the exact width of your white thing in photoshop */ 
}

는 ... 그러나 ... 그것은 당신의 포토샵 이미지 대칭해야합니다.

출처

2013-05-30 23:45:44 nouveau

간단한 CSS 편집

답변

관련 문제