Question

因此，出于某种原因，在Dreamweaver中它看起来很好 reference

但在我的网站上，它并没有在任何浏览器中正确地浮动它们，我尝试过FireFox，Chrome和IE8：

my site

如果您关心，请链接到我的网站：http://addisonbwilson.com/Portfolio/SUBPAGES/Photography.php

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Addison Wilson: Photography</title>
<link rel="stylesheet" type="text/css" href="../CODE/pcss.css">
</head>

<body>

    <?php include ("../INCLUDES/navbarsubpages.php"); ?>

    <div id="imagewrapper">
        <div id="imagecontainer">
            <img src="../IMAGES/addyftw-picture-0001-preview-320w.jpg">
        </div> <!--imagecontainer-->

        <div id="imagecontainer">
            <img src="../IMAGES/addyftw-picture-0002-preview-320w.jpg">
        </div> <!--imagecontainer-->

        <div id="imagecontainer">
            <img src="../IMAGES/addyftw-picture-0003-preview-320w.jpg">
        </div> <!--imagecontainer-->
    </div><!--wrapper-->

    <div id="imagewrapper">
        <div id="imagecontainer">
            <img src="../IMAGES/addyftw-picture-0004-preview-320w.jpg">
        </div> <!--imagecontainer-->

        <div id="imagecontainer">
            <img src="../IMAGES/addyftw-picture-0005-preview-320w.jpg">
        </div> <!--imagecontainer-->

        <div id="imagecontainer">
            <img src="../IMAGES/addyftw-picture-0006-preview-320w.jpg">
        </div> <!--imagecontainer-->

    </div><!--wrapper-->

    <div id="imagewrapper">
        <div id="imagecontainer">
            <img src="../IMAGES/addyftw-picture-0007-preview-320w.jpg">
        </div> <!--imagecontainer-->

        <div id="imagecontainer">
            <img src="../IMAGES/addyftw-picture-0008-preview-320w.jpg">
        </div> <!--imagecontainer-->

        <div id="imagecontainer">

        </div> <!--imagecontainer-->

    </div><!--wrapper-->

</body>
</html>

我的CSS：

@charset "UTF-8";
/* CSS Document */

/*The body is responsiable for the background image, the rest of the site is divided between the sub wrapper and the includes */
/*bground tile is from http://subtlepatterns.com/white-brushed/ created by Andre Schouten, crediting him here as per the usage agreement */
body {margin-top: 0px; background-image:url(../Portfolio/IMAGES/brushed_@2X.png);} 
/* navbar is a php include*/

#wrapper{width:980px; height:auto;}
#imagewrapper{width:auto; height:auto;}
#subwrapper{width: 980px; height: auto;}

#imagefull{width: auto; height: auto; background-color:#FFF; margin:3px 3px 3px 3px;}
#imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;} 
#textcontainer{width: 320px; height: 320px; background-color:#FFF; margin:3px 3px 3px 3px; float:right;} 

/* navbar and its many variations are for the navbar include*/
#navbarwrapper{positon: absolute; width:980px; height: 120px; z-index:30; background-color:#FFF;}
#navbar{width:980px; height:120px; background-repeat:repeat-x; z-index:31;}
#navbarlogo{width:210px; height:120px; float:left; z-index:32;}
#navbarcontent{width:770px; height:120px; padding-top:75px; float:left; font-family:Verdana, Geneva, sans-serif; background-repeat:repeat-x; z-index:32;}

/*Unordered lists which are used to handle drop down nav bar*/
#nav{
        list-style:none;
        font-family:Helvetica, Arial, sans-serif;
        margin-bottom:10px;
        float: right;
        width:100%;
        position:relative;
    }
#nav li{float:left; margin-right:10px; width: 120px; position:relative;}
#nav a{display:block; padding:5px; color:#000; text-decoration:none;}
#nav a:hover{color:#fff; background:#000; text-decoration:none;}
/* drop down */
#nav ul{ 
    background:#fff; 
    background:rbga(255,255,255,0);
    list-style:none;
    position:absolute;
    left:-9999px ;}
#nav ul li{ padding-top:1px; float:none; list-style:none;}
#nav ul a{white-space:nowrap;}
#nav li:hover ul{left:0;}
#nav li:hover a{background:#ccc; text-decoration:underline;}
#nav li:hover ul a{text-decoration:none;}
#nav li:hover ul li a:hover{background:#000;}

/* general tag overides*/
h1{font-size:large}
h2{font-size:larger}
h3{font-size:medium}
img {border:none}
ul{ padding: 0; margin: 0;}
li{padding: 0;}



/*link modification*/
a:link{ text-decoration: none; color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:visited{text-decoration: none;color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:active{text-decoration: none;color:#FFF; font-family: Helvetica, Arial, sans-serif}
a:hover{text-decoration: none; color:#FFF; font-family: Helvetica, Arial, sans-serif}

Answer 1

您只需将float: left;添加到#imagecontainer样式即可。它不在网上版本中。

Answer 2

对于每张图片float:left;

这会浮动包含每个图像的每个容器。立即使用此功能。

#imagecontainer
{
    float:left;
}

您也可以使用内联样式执行相同的操作。但CSS更清洁。

此外，请勿使用具有相同ID的多个元素。使用类。另外，您是否有理由为每个图像使用容器？您可以拥有一个包含许多图像的容器并使用

.container img
{
    float:left;
}

另请注意，img {float:left;}会在您的网页上隐藏所有图片。

Answer 3

更改此内容：

#imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}

以

.imagecontainer{width: 320px; height: 213px; background-color:#FFF; margin:3px 3px 3px 3px; float:left;}

并将每个<div id="imagecontainer"替换为<div class="imagecontainer"

Answer 4

尝试

#imagecontainer{
   display:inline;
   margin: 0px

}

Answer 5

#imagecontainer {
  background-color: #FFFFFF;
  float: left;
  margin: 3px 1%;
  width: 31%;
}

和这个

img {
  border: medium none;
  height: auto;
   width: 100%;
}

检查它，完美如你所愿。也响应;）

CSS我的元素没有正确浮动

5 个答案: