2014-09-19 3 views
1

나는 부동 및 여백을 파악하는 동안이 작업을 해왔지만 올바르게 작동하지는 않습니다. 내가,이 내가 내가 내가 잘못 일을 떠 있다고 생각CSS에서 플로팅 및 위치 지정

enter image description here

처럼 보이게하기 위해 노력하고있어 무엇을 내가 책이 그림에서 이렇게 말한다 모든 대부분의 일을했다고 생각, 모든 왼쪽에 서로 쌓아 놓고 있습니다. 여기에 내 바이올린은 다음과 같습니다. http://jsfiddle.net/d2u9qLxv/

나는 떠 다니는 것을 어지럽 혔고, 그걸 어지럽히는 것처럼 보일 수 없습니다. UL 인증 요소로 남아

header, footer, nav, div, p, body { 
    font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif; 
    font-size: 1em; 
} 

header { 
    background-color: rgb(63, 159, 217); 
    height: 3em; 
} 
header .brand { 
    float: left; 
    font-family: Vendana, Arial, sans-serif; 
    padding: 8px 20px 12px; 
    margin-left: 3em; 
    font-size: 1.5em; 
    font-weight: bold; 
    line-height: 1; 
    color: #f5f5f5; 
    text-decoration: none;  
} 

header nav { 
    margin: 0.70em 1em 0 0; 

} 

header ul { 
    float: left; 
    margin:0; 
    padding:0; 
} 
header li { 

    padding: 0 1em; 
} 
header li a:link { 
    color: #f5f5f5; 
    text-decoration: none; 
} 

/* Main structure */ 

div#container { 

} 
#main { 
    margin: 0 20em 0 16em; 
} 

aside { 

} 
#rail { 

} 

/* other common classes */ 

.well, .alert { 
    margin-bottom: 2em; 
    padding: 1em; 
} 
.well { 
    float: left; 
    position: absolute; 
    width: 15em; 
    background-color: #f5f5f5; 
    border: 1px solid #eee; 
    border: 1px solid rgba(0, 0, 0, 0.05); 
} 
.well h3 { 
    float: right; 
    position: absolute; 
    width: 19em; 
    background-color: #b6d1f2; 
    padding: 1em; 
} 

.alert { 
    float: left; 
    position: absolute; 
    width: 15em; 
    background-color: #edebe1; 
    border-color: #e0d9cb; 
    color: #817b58; 
} 

.breadcrumb { 
    padding: 0.5em 1em; 

    list-style: none; 
    background-color: #fbfbfb; 
} 

/* main styles */ 
#main { 
    padding: 0.5em 0.75em; 
} 
#main h2 { 
    padding-top: 1em; 
    font-size: 1.5em; 
} 
#main h4 { 
    padding-top: 1.5em; 
    font-size: 1.2em; 
} 
#main th { 
    text-align: left; 
} 
#main table { 

} 


#main #yourCompany { 

    margin-bottom: 1.5em; 
    font-size: 0.8em; 
} 
#main #client { 

    font-size: 0.8em; 
} 
#main hr { 
    clear: both; 
} 
.bigButton { 
    margin-top: 1em; 
    background-color: rgb(63, 159, 217); 
    text-align: center; 
    color: #f5f5f5; 
    text-decoration: none;  
} 


/* left rail styles */ 

#rail nav { 

} 
#rail nav ul { 
    list-style-type:none; 
    font-size: 1.1em; 
} 
#rail nav ul li { 
    margin-bottom: 0.3em; 
} 

/* right aside styles */ 

ul#changeList, ul#sellersList, ul#messageList { 
    background-color: white; 
    list-style-type:none; 
} 
ul#changeList li { 
    overflow: auto; 
    padding-top: 1em; 
} 
ul#changeList li p{ 
    padding-top: 0.5em; 
} 
ul#changeList li span { 

    min-width: 1.75em; 
    text-align: right; 
    font-size: 2em; 
    padding: 0 1em 0 0; 
    color: #616466; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); 
} 

ul#sellersList li, ul#messageList li { 
    overflow: auto; 
    padding: 1em 0.25em 0 0; 
    font-size: 0.75em; 
} 
ul#sellersList img{ 

} 
ul#sellersList p { 
    padding-top: 1.5em; 
} 

ul#messageList img { 

    padding-right: 0.5em; 
} 
#messageList li p { 
    font-size: 0.9em; 
    padding: 0.3em 0.25em; 
} 
+0

사용하는 이유 플로트를 비례 폭을 할당 된 DIV와 템플릿을 정의 = ... X %에.? 마다, 그리고 원하는 마진은 장치의 경우에도 올바른 위치에 "플로팅"됩니다. – PalDev

+0

프로젝트에 수레가 필요합니다. 미안 :/ – MatthewTingle

+0

책의 이름은 무엇입니까? –

답변

1

이 옵션을 사용하면 플로트를 넣어했기 때문에 왼쪽으로 떠 대신 수직으로 표시되는 메뉴는이 DEMO

header, footer, nav, div, p, body { 
    font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif; 
    font-size: 1em; 
} 

header { 
    background-color: rgb(63, 159, 217); 
    height: 3em; 
} 
header .brand { 
    float: left; 
    font-family: Vendana, Arial, sans-serif; 
    padding: 8px 20px 12px; 
    margin-left: 3em; 
    font-size: 1.5em; 
    font-weight: bold; 
    line-height: 1.2em; 
    color: #f5f5f5; 
    text-decoration: none;  
} 

header nav { 
    margin: 0.70em 1em 0 0; 

} 

header ul { 
    float: left; 
    margin:0; 
    padding:0; 
} 
header li { 
    list-style:none; 
    padding: 0 1em; 
    float:left; 
    line-height: 3em; 
} 
header li a:link { 
    color: #f5f5f5; 
    text-decoration: none; 
} 

/* Main structure */ 

div#container { 

} 
#main { 
    margin: 0 20em 0 16em; 
} 

aside { 

} 
#rail { 

} 

/* other common classes */ 

.well, .alert { 
    margin-bottom: 2em; 
    padding: 1em; 
} 
.well { 
    float: left; 
    position: absolute; 
    width: 15em; 
    background-color: #f5f5f5; 
    border: 1px solid #eee; 
    border: 1px solid rgba(0, 0, 0, 0.05); 
} 
.well h3 { 
    float: right; 
    position: absolute; 
    width: 19em; 
    background-color: #b6d1f2; 
    padding: 1em; 
} 

.alert { 
    float: left; 
    position: absolute; 
    width: 15em; 
    background-color: #edebe1; 
    border-color: #e0d9cb; 
    color: #817b58; 
} 

.breadcrumb { 
    padding: 0.5em 1em; 

    list-style: none; 
    background-color: #fbfbfb; 
} 

/* main styles */ 
#main { 
    padding: 0.5em 0.75em; 
    width: 60%; 
} 
#main h2 { 
    padding-top: 1em; 
    font-size: 1.5em; 
} 
#main h4 { 
    padding-top: 1.5em; 
    font-size: 1.2em; 
} 
#main th { 
    text-align: left; 
} 
#main table { 

} 


#main #yourCompany { 
    float:left; 
    margin-bottom: 1.5em; 
    font-size: 0.8em; 
} 
#main #client { 
    float:right; 
    font-size: 0.8em; 
} 
#main hr { 
    clear: both; 
} 
.bigButton { 
    margin-top: 1em; 
    background-color: rgb(63, 159, 217); 
    text-align: center; 
    color: #f5f5f5; 
    text-decoration: none;  
} 


/* left rail styles */ 
#rail { 
    width:20% 
} 
#rail nav { 

} 
#rail nav ul { 
    list-style-type:none; 
    font-size: 1.1em; 
} 
#rail nav ul li { 
    margin-bottom: 0.3em; 
} 

/* right aside styles */ 

ul#changeList, ul#sellersList, ul#messageList { 
    background-color: white; 
    list-style-type:none; 
} 
ul#changeList li { 
    overflow: auto; 
    padding-top: 1em; 
} 
ul#changeList li p{ 
    padding-top: 0.5em; 
} 
ul#changeList li span { 

    min-width: 1.75em; 
    text-align: right; 
    font-size: 2em; 
    padding: 0 1em 0 0; 
    color: #616466; 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); 
} 

ul#sellersList li, ul#messageList li { 
    overflow: auto; 
    padding: 1em 0.25em 0 0; 
    font-size: 0.75em; 
} 
ul#sellersList img{ 


} 
ul#sellersList p { 
    padding-top: 1.5em; 
} 

ul#messageList img { 

    padding-right: 0.5em; 
} 
#messageList li p { 
    font-size: 0.9em; 
    padding: 0.3em 0.25em; 
} 

aside{width:20%} 
table img{ 
    width: 150px; 
height: 150px; 
background: #333; 
} 
+0

대시 보드 연락처 및 작업이 Not Real CRM과 함께 인라인으로 이동되었습니다. 하지만 모든 것이 쌓인 것처럼 여전히 나에게 보인다 :/고마워! – MatthewTingle

+0

채팅으로 이동 하시겠습니까? – MatthewTingle

+0

예 아직 계시다면 –

0

같은 것을보십시오 : 여기

내 CSS의 ; li 목록 요소 자체에 있어야하므로 모두 서로에 대해 왼쪽으로 떠 있습니다.

그러나 메뉴를 수행하는 일반적인 방법은 목록 요소를 인라인 요소로 만드는 것입니다 (기본적으로 목록의 수직 특성을 달성하기 위해 블록 요소이므로

).
 li { display: inline; } 

또한 필요합니다

 ul { list-style-type: none; } 

총알 포인트 없애