Проблемы с позиционированием CSS

Я пытаюсь получить элементы, сосредоточенные в одном блоке, как это www.spookycraft.net Но я не смог понять это. Мой код: http://jsfiddle.net/7PP9K/1/Проблемы с позиционированием CSS

сырье код:

<! DOCTYPE HTML> 
<html> 
<head> 
<meta charset='UTF-8'> 
<title> Wandercraft Network </title> 

<style media="screen" type="text/css"> 

.slide-up-boxes a{ 
display:block; 
width:300px; 
height:300px; 
background: #eee; 
border: 1px solid #ccc; 
overflow:hidden; 
} 

.slide-up-boxes h5{ 
height:300px; 
width:300px; 
text-align:center; 
line-height:150px; 
-webkit-transition: margin-top 0.3s linear ; 
background-color:#white; 
} 

.slide-up-boxes a:hover h5{ 
margin-top:-300px; 

} 

.slide-up-boxes div{ 
text-align:center; 
height:300px; 
width:300px; 
opacity:0; 
background-color:orange; 
-webkit-transform: rotate(6deg); 
-webkit-transition: all 0.2s linear ; 
} 

.slide-up-boxes a:hover div{ 
-webkit-transform: rotate(0); 
opacity:1; 
} 

.slide-up-boxes{ 
margin:auto; 
} 




</style> 

</head> 

<body> 


<div id="page-wrap"> 

<section class="slide-up-boxes"> 

<a href="www.reddit.com"> 
<img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png"> 
<div> 
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
</div> 
</a> 

</div> 

<section class="slide-up-boxes"> 
<a href="www.reddit.com"> 
<img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png"> 
<div> 
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
</div> 
</a> 

<section class="slide-up-boxes"> 
<a href="www.reddit.com"> 
<img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png"> 
<div> 
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
</div> 
</a> 

<section class="slide-up-boxes"> 
<a href="www.reddit.com"> 
<img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png"> 
<div> 
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5> 
</div> 
</a> 
</div> 
</body> 

</html>

Я буду обновлять этот пост, если я найду ответ спасибо за чтение.

источник

2013-06-14 user2426889

Вы хотите, чтобы 4 изображения были показаны как сетка 2x2? – itsols

Я обновил свой jsfiddle.

Я закрыл разделы и добавил некоторые CSS, чтобы обеспечить ту же презентацию, что и сайт spookycraft.

Посмотрите на это:

http://jsfiddle.net/7PP9K/4/

Основные изменения:

body{ 
    width:960px; 
} 

#page-wrap{ 
    width:620px; 
    margin:0 auto; 
} 
.slide-up-boxes { 
    margin:5px; 
    width:300px; 
    float:left; 
}

редактирования: неправильный jsfiddle ссылку, теперь обновленный

источник

2013-06-14 01:56:24 JanR

тело {ширина: 960px; } фактически подтолкнул его влево, я удалил его, он отлично работал, ты очень помог, спасибо. – user2426889

Хитрость к центру позиционирования элементов блока является

margin: 0 auto;

Просто добавить, что ваш якорь CSS (.slide-вверх-боксы а) или любой другой элемент, который вы хотите, в центре, и он должен работать. Убедитесь, что он имеет фиксированную ширину.

источник

2013-06-14 01:52:14 bitwiser

Дайте родителю фиксированную ширину и в центре его автоматизированными полями:

#page-wrap { 
    width:300px; 
    margin:0 auto; 
}

Fiddle sample

источник

2013-06-14 01:52:24

CSS : 

.slide-up-boxes a { 
    float:left;    // changes made 
    display:block; 
    width:300px; 
    height:300px; 
    background: #eee; 
    border: 1px solid #ccc; 
    overflow:hidden; 
} 
#page-wrap{ 
    width:620px; 
    margin:0 auto; 
} 
body{ 
    width:1200px; 
}

DEMO

источник

2013-06-14 04:55:19 Aravind30790

Проблемы с позиционированием CSS

ответ

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