CSS 센터 열 - 삭제 오류?

저는 CSS가 매우 새로워서 중간 섹션이 왜 열로 표시되지 않는지 알아 내려고 여기 몇 시간 동안 앉아있었습니다. 나는 분명히 성공하지 못한 채 그물을 수색했다. 나는 divs의 위치를 재조정하고, 모든 것을 정리하고, 모든 것에서 bejesus를 떠 다니는 시도를 해왔다. 그것은 단순해야합니다. 그러나 나는 무엇을 모르겠습니다. 아무도 도와 줄 수 있습니까?CSS 센터 열 - 삭제 오류?

많은 양의 코드가 적절하지 않다고 사과하지만 아직 업로드 된 내용이 없습니다. 사전에

감사

HTML

<head><style type="text/css" media="all">@import "css/master.css";</style></head> 

<body> 
<div id="page-container"> 
    <!-- RIGHT HAND PAGE --> 
    <div id="navbar">NavBar</div> 
    <div id="mediaplayer">Meda Player</div> 
    <div id="sightings">Sightings</div> 
    <div id="blogheader">Blog Header</div> 
    <div id="sociallinks">Social Links</div> 
    <!-- LEFT HAND PAGE --> 
    <div id="logo">Logo</div> 
    <div id="mainpic">MainPic</div> 
    <!-- CENTRE PAGE --> 
    <div id="headline">Headline</div> 
    <div id="newsitems">News Items</div> 
    <!-- FOOTER --> 
    <div id="footer">Footer</div> 
</div> 
</body> 
</html>

CSS

#page-container { 
width:960px; 
margin:auto; 
background:red; 
} 

html, body { 
margin:0; 
padding:0; 
} 

#logo { 
background:purple; 
height:150px; 
width:270px; 
margin-right:450px; 
} 

#mainpic { 
background:darkgrey; 
width:270px; 
height:450px; 
} 

#navbar { 
float:right; 
background:lightblue; 
height:50px; 
width:690px; 
} 

#headline { 
background:grey; 
height:200px; 
margin-left:270px; 
margin-right:350px; 
} 

/* News Items Mock - height:350px */ 
#newsitems { 
background:blue; 
margin-left:270px; 
margin-right:350px; 
} 

#mediaplayer { 
clear:both; 
float:right; 
background:black; 
height:200px; 
width:350px; 
} 

/* Sightings Mock - height:150px; */ 
#sightings { 
clear:both; 
float:right; 
background:green; 
width:350px; 
} 

#blogheader { 
clear:both; 
float:right; 
background:darkgreen; 
height:40px; 
width:350px; 
} 

#sociallinks { 
clear:both; 
float:right; 
background:orange; 
height:40px; 
width:350px; 
} 

#footer { 
background:yellow; 
clear:both; 
height:30px; 
}

출처

2012-03-24 tomdot

내가하려는 디자인을 구성 할 수 없거나 예상 모형을 게시하거나 기대하는 바가 무엇인지 더 잘 설명 할 수 있습니까? –

죄송합니다. 내 담당자가 이미지를 게시 할 수 없다는 의미로 내 게시물을 편집하여 이미지 링크를 보여줍니다. – tomdot

우리가 찾고있는 것을 보게 될 것이고 당신의 모형에있는 코드를 어떻게 만들었습니까? 그래서 우리가 당신의 코드에서 오류를 쉽게 찾을 수 있도록 & 시도 할 것입니다. .... 솔루션을 얻으려면 –

내가 볼 문제는 당신이 다른 상단에 div를 하나의 시리즈를 스택 위해 노력하고 있다는 것입니다 어떤 컨테이너도없이 3 열의 페이지 디자인을 만들 수 있습니다. CSS로 할 수있는 반면, 각 열에 대해 일련의 컨테이너를 만드는 것이 더 간단 할 것입니다. 아래 div를 스택에 사용하십시오. 예를 들면 다음과 같습니다.

일련의 열 div를 만든 경우 모든 페이지 섹션을 고유 한 열 안에 쉽게 쌓을 수 있습니다. 이렇게하면 페이지에 원하는만큼 많은 섹션을 쉽게 스택 할 수 있습니다 귀하의 CSS로 컴백하고 그것을 지금하고있는 방식으로 배치하십시오.

<div class="column"> 
    <section> 
    <section> 
</div> 

<div class="column"> 
    <section> 
    <section> 
</div> 

<div class="column"> 
    <section> 
    <section> 
</div>

당신이 당신의 열을 마크 업에 선언하면 서로 옆에 쌓아 그래서, 당신은 그 때를 떠 있습니다 그들은과 같이, 서로에 따라 이동하지 않도록 다음은 clearfix를 사용할 수 있습니다

를 여기

.column:before, .column:after { 
    content:""; 
    display:table; 
} 

.column:after { 
    clear:both; 
} 

.column { 
    zoom:1; /* ie hasLayout fix */ 
    float:left; 
}

이 찾고있는 내가 당신을 생각 결과로 구현 된 열이 코드의 데모입니다 : http://jsfiddle.net/wSejZ/1/ : http://jsfiddle.net/wSejZ/1/show/, 당신은 여기에 바이올린을 편집 할 수 있습니다.

섹션이 열의 내부에 어떻게 쌓여 있는지주의하십시오. 이렇게하면 원하는만큼 많은 섹션을 쌓을 수 있으며 컨테이너 내부에 적절히 쌓아 올릴 수 있습니다.

출처

2012-03-24 12:42:40

그게 다야 - 환상적이야! 나는 처음에는 별도의 컨테이너를 만드는 것으로 생각해야했다. 나는 그 CSS의 일부를 이해하지 못한다. 그러나 나는 그것을 읽을 수있다. 내 모든 인내심을 가져 주셔서 감사합니다! – tomdot

@tomdot 필자는 http://nicolasgallagher.com/micro-clearfix-hack/에서 열에이 클리어 픽스 기술을 사용 했으므로 "사용 이유"를 읽을 수 있습니다. –

CSS 센터 열 - 삭제 오류?

답변

관련 문제