Div不向左浮動

似乎無法讓此div移動到左側。使用wordpress。我嘗試了很多東西，但不知所措。下面是DIV的CSS：Div不向左浮動

#portfolio li img { 
    position: absolute; 
    float: left; 
    margin: 34px 50px 0 0; 
    width: 942px; 
}

這裏是header.php文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- 
Design by Davey Whitney 
[email protected] 
--> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset'); ?>" /> 



<link rel="stylesheet" type="text/css" href="wp-content/themes/zenlite/layout.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/print.css" media="print" /> 
<link rel="stylesheet" type="text/css" href="wp-content/themes/zenlite/color.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script> 
<script type="text/javascript" src="js/jquery.innerfade.js"></script> 
<script type="text/javascript" src="js/custom.js"></script> 





<title> 
Wildfire 
</title> 


<script type="text/javascript" src="http://wfithaca.com/js/jquery.lavalamp.js"></script> 
<script type="text/javascript" src="http://wfithaca.com/js/jquery.easing.1.1.js"></script> 
<script type="text/javascript" src="http://wfithaca.com/js/jquery.cycle.all.min.js"></script> 


<script type="text/javascript"> 
    function my_kwicks(){ 
    $('.kwicks').kwicks({ 
     duration: 300, 
     max: 200, 
     spacing: 0 
    }); 
} 

$(document).ready(function(){ 
    my_kwicks(); 
}); 


</script> 

<script type="text/javascript"> 
     $(document).ready(
       function(){ 


        $('ul#portfolio').innerfade({ 
         speed: 1000, 
         timeout: 5000, 
         type: 'sequence', 

        }); 



      }); 
    </script> 

</script> 

    <script type="text/javascript"> 
$(document).ready(function(){ 
     $('li.headlink').hover(
      function() { $('ul', this).css('display', 'block'); }, 
      function() { $('ul', this).css('display', 'none'); }); 
    }); 

    </script> 




</head> 

<body> 



<div id="wrapper"> 



    <div id="header"> 


       <ul id="portfolio">     

        <li> 

         <img src="http://wfithaca.com/images/banner1.png" /> 

        </li> 
        <li> 
         <img src="http://wfithaca.com/images/banner1.png" /> 
        </li>     
        <li> 
         <img src="http://wfithaca.com/images/banner1.png" /> 
        </li>     


       </ul> 






    </div> 


<div id="navigation"> 
    <div id="kwickbar"> 

    <ul class="kwicks"> 
    <li id="kwick1"><a href="#">Home</a></li> 
    <li id="kwick2"><a href="#">Menu</a></li> 
    <li id="kwick3"><a href="#">Events</a></li> 
    <li id="kwick4"><a href="#">Friends</a></li> 
    <li id="kwick5"><a href="#">Contact</a></li> 

</ul> 


    </div> 
</div>

這裏是樣式表：

html,body { 

    font-family:Tahoma, Verdana,Arial, Helvetica, sans-serif; 
    font-size:100%; 
    padding:0; 
    color:#fff; 
    border-style:none; 



    } 
a { 

    text-decoration:none; 
} 
a:hover,a:active,a:focus { 
    text-decoration:none; 
} 
ul li { 
    list-style-type:none; 


} 
ul.dbem_events_list a:link {color: #A32725; text-decoration: underline; } 
ul.dbem_events_list a:visited {color: #A32725; text-decoration: underline; } 
ul.dbem_events_list a:hover {color: #ffffff; text-decoration: none; } 
ul.dbem_events_list{text-decoration:none; list-style-type:none;} 

ul li ul li { 
    list-style-type:none; 
} 
ul li ul li ul li { 
    list-style-type: none; 
} 
q:before, q:after { 
    content:""; 
} 
#wrapper { 
    width:986px; 
    margin: 0 auto; 
} 

#header { 

    background-image:url('images/headframe.png'); 
    width:986px; 
    height:271px; 
} 

#kwickbar { 
    padding: 25px 0 0 25px; 
} 

#navigation { 
    width:984px; 
    height: 100px; 
    background-color: #000000; 
    text-decoration:none; 
    margin-left:1px; 
} 

.update-post { 
    float:left; 
    width:100px; 
} 
#content { 
    float:left; 
    height:100%; 
    width:984px; 
    background-color: #000000; 
    text-decoration:none; 
    margin-left:1px; 
} 

#postcontent{ 
height:100%; 
width:100%; 
} 

#content .post { 
    float:left; 
    width:90px; 
} 
#content .page,#content .attachment,.postcontent { 
    color:#fff; 
    width:720px; 
    margin-top:15px; 
    margin-left:30px; 
    float:left; 
    text-decoration:none; 
} 
.photo { 
    width: 250px; 
    height:700px; 
    background-color:#000000; 
    margin:0 0 0 880px; 
} 
.slideshow { height: 232px; width: 232px; margin:0 0 0 880px; } 
.slideshow img { border: 5px solid #000; } 

.post-title { 
    margin:0; 
    padding:0; 
} 
.post-title a { 
    text-decoration:none; 
} 
.post-title a:hover,.post-title a:active,.post-title a:focus { 
    text-decoration:underline; 
} 
#content .meta li,#content .prevnext li,#content .gallery li { 
    list-style-image:none; 
    list-style:none; 
} 
.meta { 
    margin:5px 0 0; 
    padding:0; 
    font-size:.85em; 
} 
.meta ul,.meta li { 
    margin:0; 
    padding:0; 
} 
.meta ul { 
    display:inline; 
} 
.meta li li { 
    display:inline; 
    padding-right:.3em; 
} 
.postfoot { 
    clear:both; 
    margin-bottom:20px; 
    padding-bottom:10px; 
    line-height:1.2em; 
} 
.author .posts-by { 
    padding-top:10px; 
} 
#footer { 
    clear:both; 
    margin:0; 
    padding:0 0 5px; 
    text-align:center; 
    font-size:.8em; 
    border: 0; 
    width:960px; 
} 
#footer ul { 
    clear:both; 
    margin:0; 
    padding:0; 
} 
#footer li { 
    display:inline; 
    margin:0; 
    padding:0 5px; 
} 
#footer li.rss { 
    position:relative; 
    top:3px; 
} 


.copyright { 
    padding:50px 0 0 0; 
    font-family:verdana; 
    color:#ffffff; 
    text-align:left; 
    width:800px; 
    font-size:0.8em; 
} 

.copyright a 
{ 
text-decoration:none; 
color:#7E0000; 
font-weight:600; 
} 

.copyright a:hover 
{ 
color:#C0D341; 
} 



. 



.postcontent p { 
    text-decoration:none; 
    border:0; 
    border-style:none; 
    } 

    .postcontent p a:hover { 
     color:#fff; 

    } 





.kwicks { 
    list-style-type: none; 
    list-style-position:outside; 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 

.kwicks li{ 
    display: block; 
    overflow: hidden; 
    padding: 0; 
    cursor: pointer; 
    float: left; 
    width: 125px; 
    height: 40px; 
    margin-right: 0px; 
    background-image:url('http://wfithaca.com/images/kwicks.jpg'); 
    background-repeat:no-repeat; 
} 

.kwicks a{ 
    display:block; 
    height:40px; 
    text-indent:-9999px; 
    outline:none; 
} 

#kwick1 { 
    background-position:0px 0px; 
} 
#kwick2 { 
    background-position:-200px 0px; 
} 
#kwick3 { 
    background-position:-400px 0px; 
} 
#kwick4 { 
    background-position:-600px 0px; 
} 
#kwick5 { 
    background-position:-800px 0px; 
} 

#kwick1.active, #kwick1:hover { 
    background-position: 0 bottom; 
} 
#kwick2.active, #kwick2:hover{ 
    background-position: -200px bottom; 
} 
#kwick3.active, #kwick3:hover { 
    background-position: -400px bottom; 
} 
#kwick4.active, #kwick4:hover { 
    background-position: -600px bottom; 
} 
#kwick5.active, #kwick5:hover { 
    background-position: -800px bottom; 
} 

#portfolio li img { 
    position: absolute; 
    float: left; 
    margin: 34px 50px 0 0; 
    width: 942px; 
}

只想#portfolio李IMG的div向左移動一點。任何幫助將不勝感激。

來源

2010-05-10 Davey

你在移動IMG還是div？我不明白。 – AlexanderMP 2010-05-10 21:31:21

由於元素絕對定位，浮動並不適用於它。要麼刪除position: absolute;並讓它浮動離開，或保持position: absolute;並取出float: left;。如果您決定絕對位置，也說明它是從left或right多遠，水平移動，如：

#portfolio li img { 
    position: absolute; 
    left: 15px; /* increase the leftmost point 15 px */ 
    margin: 34px 50px 0 0; 
    width: 942px; 
}

在戴維的評論來看，添加以下樣式：

#portfolio { 
    position: relative; 
}

的原因是它向左邊拍攝waaaaay是因爲它可能相對於瀏覽器絕對定位。將容器設置爲相對定位使得絕對定位的兒童元素相對於父母定位。欲瞭解更多信息（和更好的描述），請查看this wiki page。

來源

2010-05-10 21:35:52

所以我喜歡這個： #portfolio li img { \t position：absolute; \t right：1px; \t margin：34px 0 0 0; \t width：942px; } 它wayyyyyy拍攝它的左邊。 – Davey 2010-05-10 21:40:52

這是什麼結束了工作哈哈，我德夫將不得不提高我的技能，並檢查出該wiki頁面。感謝所有的幫助！萬歲！ #portfolio { position：relative; } #portfolio利IMG { 位置：相對; left：-18px; margin：34px 50px 0 0; 寬度：942px; } – Davey 2010-05-10 22:03:39

position: absolute和float: left不要一起去！

來源

2010-05-10 21:32:06 Kasturi

'position：absolute'將基本上無效任何你用於'浮動'... – animuson 2010-05-10 21:34:50

油和水... :) – Kasturi 2010-05-10 21:46:37

您應該使用絕對定位或浮它：

#portfolio li img { 
    position: absolute; 
    left: 0; 
    margin: 34px 50px 0 0; 
    width: 942px; 
}

或

#portfolio li img { 
    float: left; 
    margin: 34px 50px 0 0; 
    width: 942px; 
}

請注意，絕對定位將您的圖像找到了文件的流完全，所以其他的內容可以是低於/高於它。

來源

2010-05-10 21:36:32 jeroen

Div不向左浮動

回答

相關問題