0

我想要三个 div 彼此相邻（我将它们放在 .wrapper div 中，这样我就可以将它们浮动到左侧）。三个 div 应该在页面上居中。所以我想，如果我将 .wrapper 与 margin-left/right: auto 居中，所有三个 div 都会居中。这没有用。此外，当我调整浏览器的大小时，div 会移动。我不希望这种情况发生。

我已经无休止地搜索并在脚本中放置了很多解决方案，但没有任何效果。

此外，每个浏览器（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;
}
4

3 回答 3

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 代码

于 2013-08-08T13:28:37.320 回答
0 
#wrapper
{
 text-align: center;
}
#compass
{
width:33.3%; 
}
#sailor
{
width:33.3%;
}
#lost
{
 width:33.3%;
}

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

于 2013-08-08T13:34:42.197 回答
0

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

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

.wrapper {
    width: 240px;
    margin-left:auto;
    margin-right:auto;
}
于 2013-08-08T13:31:00.157 回答