0

3 つの div が隣り合っている必要があります (.wrapper div に配置して、左にフロートできるようにしました)。3 つの div はページの中央に配置する必要があります。したがって、.wrapper を margin-left/right: auto で中央に配置すると、3 つの 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

ラッパーに固定幅を使用して、中央に配置できます。div はブロックレベルであるため、幅を指定する必要があります (空のままにしないでください)。つまり、デフォルトで幅全体を埋めます。

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

.wrapper {
    width: 240px;
    margin-left:auto;
    margin-right:auto;
}
于 2013-08-08T13:31:00.157 に答える
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 に答える