个人中心
gpt4 book ai didi

php - Div不向左浮动

转载 作者：太空宇宙 更新时间：2023-11-03 19:54:22 24 4
gpt4 key购买 nike

似乎无法让这个 div 向左移动。使用WordPress。我尝试了很多东西，但不知所措。这是 div 的 CSS:

#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
davey@daveywhitney.com
-->

<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 li img div 向左移动一点。任何帮助将不胜感激。

最佳答案

position: absolute 和 float: left 不能一起使用!

关于php - Div不向左浮动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2806580/

24 4 0
文章推荐： javascript - 如何使用jQuery编写浏览器相关的脚本？
文章推荐： c# - 从 C# 代码安装 npm 失败
文章推荐： python - 从列中的行中删除 '[]' 和 '()'
文章推荐： c# - c# 中 Get 和 Set 方法的目的是什么？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com