Divs не отображается правильно, плюс размер вопроса

Я хочу, чтобы три div были рядом друг с другом (я поместил их в div .wrapper, чтобы я мог поплавать их влево). Три div должны быть сосредоточены на странице. Поэтому я подумал, что если я закрою wrapper с помощью margin-left/right: auto, все три divs будут центрироваться. Это не сработало. Кроме того, когда я изменяю размер браузера, divs перемещается. Я не хочу, чтобы это произошло.Divs не отображается правильно, плюс размер вопроса

Я бесконечно googled и много вариантов решений в сценарии, ничего не работало.

Кроме того, он показывает разные браузеры (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; 
}

источник

2013-08-08 Kraishan

Вы установили '.wrapper {width: 100%}'. Таким образом, это будет вся ширина браузера и 'margin- {left, right}: auto' ничего не сделает. – Phylogenesis

Я удалил ширину, тот же результат. – Kraishan

Правильно. Вы не можете центрировать что-то, если нет места, чтобы сосредоточить его. – isherwood

попробовать этот

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 Code

источник

2013-08-08 13:28:37

Это тоже не сработало, изображения просто перекрывались вправо. – Kraishan

, пожалуйста, проверьте рабочий код, я обновил его с помощью изображений http://jsfiddle.net/AGjDm/1/, где он работает отлично. –

Спасибо! Теперь изображения/divs центрированы. Однако, когда я все еще перемещаю браузер, они идут ниже eachother. Как этого избежать? – Kraishan

Вы можете использовать фиксированную ширину на вашем обертку, чтобы получить его в центр. Вам нужно указать ширину (и не оставить ее пустой), потому что divs являются блочными, что означает, что они заполняют всю ширину по умолчанию.

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

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

источник

2013-08-08 13:31:00 isherwood

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

Попробуйте CSS. Включите этот css в свой css.

источник

2013-08-08 13:34:42 archu

Divs не отображается правильно, плюс размер вопроса

ответ

Смежные вопросы