CSS : 사이드 바가 올바르게 작동하지 않습니다.

사이드 바를 작동 시키려고합니다. 하지만 #main 섹션이 사이드 바를 따라 가게하지는 않습니다. 대신 사이드 바를 가져 와서 메인을 따라갑니다 (아래에 넣습니다). 당신은 사이드 바/존재 maynot 수 있으며, 주요 공간을 채울 해결책을 얻을 수 있다면 또한 :(CSS : 사이드 바가 올바르게 작동하지 않습니다.

, 그것은 좋은 것입니다. 다음은

내가 얻으려고 노력하고있는 무슨이다.

여기

CSS Desired layout

는 관련 CSS

#main 
{ 
    margin: 0 0 0 100px; /* This is my way of indenting it over the sidebar (not dynamic to no sidebar being present*/ 
    padding: 15px 15px 15px 15px; 
    background-color: #fff; 
    border-radius: 4px 0 0 0; 
    -webkit-border-radius: 4px 0 0 0; 
    -moz-border-radius: 4px 0 0 0; 
} 

ul#sidebar 
{ 
    width: auto; 
    /* float:left; */ 
    font-size: 95%; 
    word-spacing: -0.1em; 
    padding:10px 10px 10px 1px; 
}

바닥 글의 일부가 잘 작동하는 것 같다입니다.

출처

2011-12-21 Doomsknight

당신은 %를 사용하여 폭을 설정하고 왼쪽 사이드 바 플로트 수 ...

<div class="wrapper"> 
    <div class="sidebar">Sidebar</div> 
    <div class="main">Main</div> 
</div> 

.wrapper {width:100%; overflow:hidden;} 
.sidebar {width:8%; float:left; margin-right:2%;} 
.main {width:90%; float:left;}

출처

2011-12-21 16:41:07 Liam

CSS의 순수한 효과를보기 위해 내 CSS를 사용 중지했습니다. 비트 단위로 교환 할 수 있습니까? – Doomsknight

jsfiddle.net에 코드 게시 그것의 더 쉬운 경우 ... – Liam

메인에 여백이 필요하지 않은 경우 메인을 오른쪽으로 부 주시거나 탐색 표시기를 왼쪽으로 부 주면됩니다. 나는 당신에게 플로트가 있다는 것을 알아 차린다. 너를 위해 일하지 않았 니?

출처

2011-12-21 16:33:17

사이드 바가 나란히 서서 나란히 갈 수있었습니다. 그러나 양식 상자는 그 아래에 있었고 플러스는'패딩 : 50px 20px 10px 1px; 그냥 원격으로 닫을 수 있습니다. 적어도 말하기에는 끈적 해 보였습니다. 편집하다. 오, 그리고 메인에 오른쪽으로 떠 다니는 것은 그냥 바닥 글 밑에 놓습니다. :( – Doomsknight

아, 둘 다 후에 float을 지우는 것을 잊지 마세요. 여러 가지 방법이 있지만, 나는 수평으로 배열 된 것들의 그룹 뒤에'

'을 넣을 것입니다. 클리어 클래스는 다음과 같습니다 : 'div.clear {clear : both}' –

플로트가 모두 왼쪽은 평소 방법이다. 그러나 두 개의 떠 다니는 요소 뒤에 플로트를 지우는 것을 기억해야합니다. 그렇지 않으면 바닥 글에서 언급 한 것처럼 겹쳐집니다. 보통 clear:both으로 빈 div를 처리하여이 문제를 처리합니다.

나는 약 Grids을 말할 수 없다. 표준 960 및 유체 그리드 옵션이 있습니다. 그런 다음 수레, 겹침 또는 줄 바꿈에 대해 걱정할 필요가 없습니다. 그것은 단지 당신을 위해 완료되었습니다. 그렇다면 정말로 중요한 부분에 개발 시간을 투자 할 수 있습니다.

출처

2011-12-21 16:45:18 bpeterson76

CSS : 사이드 바가 올바르게 작동하지 않습니다.

답변

관련 문제