潜水没有正确显示，加上调整大小的问题

Question

我想要三个相邻的div（我把它们放在.wapperdiv中，这样我就可以把它们向左浮动）。三个div应该位于页面的中心。所以我想，如果我用margin left/right：auto将.wapper居中，那么所有三个div都会居中。这没用。此外，当我调整浏览器的大小时，div会移动。我不希望发生这种事。

我在谷歌上搜索了endlessy，在脚本中加入了很多解决方案，但都没有成功。

此外，每个浏览器（firefox、safari和Chrome）的显示方式也不同。

这是我的HTML:

<div id="container">
    <div class="wrapper">
        <div id="lost"><img src="images/lost.png"></div>
        <div id="compass"><img src="images/compass.png"></div>
        <div id="sailor"><img src="images/sailor.png"></div>
    </div>
    <div id="sea">
        <img src="images/seaAnimated.png" class="sea" id="animatedSea">
    </div>
</div>

还有我的CSS：

body,html
{
    margin:0px;
    padding:0px;
}
#container
{
    position:absolute;
    width:100%;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}
.wrapper
{
    left:auto;
    right:auto;
    margin-left:auto;
    margin-top:8%;
    margin-right:auto;
    padding-left:auto;
    padding-right:auto;
    width:100%;
    height:75%;
}
#lost
{
    float:left;
    width:auto;
    clear:both;
    margin-left:auto;
    margin-right:auto;
}
#compass
{
    float:left;
    width:auto;
    height:75%;
    margin-left:auto;
    margin-right:auto;
}
#sailor
{
    float:left;
    width:auto;
    height:75%;
    margin-left:auto;
    margin-right:auto;
}
#sea
{
    position:absolute;
    bottom:0px;
    z-index:2;
    background-image:url(images/sea.png);
    background-repeat:repeat-x;
    background-position:bottom;
    height:25%;
    width:100%;
}
#animatedSea
{
    position:absolute;
    bottom:10px;
    width:auto;
    height:25%;
    z-index:-1;
}

Answer 1

尝试这个

css

.wrapper{
    text-align:center;
    margin-top:8%;
    width:100%;
    height:75%;
}
#lost{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:#0C0;
}
#compass{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:#06F;
}
#sailor{
    display:inline-block;
    width:50px;
    height:50px;
    background-color:#96F;  
}

html

<div class="wrapper">
    <div id="lost">123</div>
    <div id="compass">456</div>
    <div id="sailor">789</div>
</div>

jsFiddle代码

Answer 2

您可以在包装器上使用固定宽度使其居中。您必须指定一个宽度（不要留空），因为div是块级的，这意味着默认情况下它们会填充整个宽度。

http://jsfiddle.net/isherwood/CBMaX/2

.wrapper {
    width: 240px;
    margin-left:auto;
    margin-right:auto;
}

Answer 3

#wrapper
{
 text-align: center;
}
#compass
{
width:33.3%; 
}
#sailor
{
width:33.3%;
}
#lost
{
 width:33.3%;
}

试试这个css。将此css包含到您的css中。