在CSS中浮动和定位

时间：2014-09-19 17:23:14

标签： html css css-float

我一直在努力研究浮动和边距，但我似乎无法让它正常工作。我想我已经完成了本书在这张照片中要做的大部分工作，这就是我试图让它看起来像

enter image description here

我想我可能会把事情弄错了，一切都只是在左边堆叠在一起。这是我的小提琴：http://jsfiddle.net/d2u9qLxv/

我一直在搞乱浮动，似乎无法掌握它。

这是我的css：

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;
}

2 个答案:

答案 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;
}

答案 1 :(得分：0)

菜单选项垂直显示而不是向左浮动，因为您已将float：left放在ul元素上;它应该在li list元素本身上，所以它们都相互浮动。

但是，更常用的菜单方法是避免浮动的变化，它是使列表元素成为内联元素（默认情况下它们是块元素，以实现列表的垂直特性。所以使用：

      li { display: inline; }

您还需要：

     ul { list-style-type: none; }

摆脱要点。

相关问题
最新问题