Форум PHP программистов -> DIV Смещение к левой стороне

DIV Смещение к левой стороне, Нужна помощь по CSS

Подписка на тему | Сообщить другу | + закладки | Версия для печати

eLDeR

۩ [x] Дата

Пользователь

Профиль
Группа: Форумчанин
Завсегдатай форума

Сообщений: 74
Пользователь №: 18969
На форуме: 15 лет, 7 месяцев, 20 дней
Карма:

Выравнивается вертикально... сделать горизонтально примыкающем не получается... Прошу помощи...
Код:

<div class="page-list page-list-ext allpagelist">
	<div class="page-list-ext-item"><hr class='style-two'>
		<div class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-010/" title="Баня Б-010">
		<img src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_010_mini-150x150.jpg" width="100" alt="Баня Б-010" /></a></div>
	<h3 class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-010/" title="Баня Б-010">Баня Б-010</a></h3>
		<div class="page-list-ext-item-content">Одноэтажная баня (7,35м х 9,1м). Парная. Душевая. Комната отдыха. Терраса. Тамбур.</div>
	</div>
	<div class="page-list-ext-item"><hr class='style-two'>
		<div class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-009/" title="Баня Б-009">
		<img src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_009_mini-150x150.jpg" width="100" alt="Баня Б-009" /></a></div>
	<h3 class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-009/" title="Баня Б-009">Баня Б-009</a></h3>
		<div class="page-list-ext-item-content">Двухэтажная баня (6м х 7м). Парная. Бассейн. Душевая. Раздевалка. Комната отдыха. Крыльцо. Мансарда.  Балкон.</div>
	</div>
	<div class="page-list-ext-item"><hr class='style-two'>
		<div class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/banya-b-008/" title="Баня Б-008">
		<img src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_008_mini-150x150.jpg" width="100" alt="Баня Б-008" /></a></div>
	<h3 class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/banya-b-008/" title="Баня Б-008">Баня Б-008</a></h3>
		<div class="page-list-ext-item-content">Одноэтажная баня (5,7м х 5,4м). Душевая. Парная. Комната отдыха. Крыльцо. Тамбур.</div>
	</div>
<div>

CSS:

div.allpagelist {
	width: 100%;
}

div.allpagelist div.page-list-ext-item {
	width: 300px;
	height: 200px;
	display: block;
	float: left;
	border: 1px solid #444;
	margin:0;
	padding:0;
}

Это сообщение отредактировал sergeiss - 4.03.2015 - 17:37

Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда

Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда

sergeiss

Дата

Сидел он, дум великих полон - и вдаль глядел

Профиль
Группа: Эксперт
Группа переписки

Сообщений: 15860
Пользователь №: 4190
На форуме: 17 лет, 2 месяца, 22 дня
Карма: 490

Цитата (eLDeR @ 4.03.2015 - 16:59)

Выравнивается вертикально... сделать горизонтально примыкающем не получается...

Поясни подробнее, так не понятно. Что именно должно быть выровнено? Лучше, может быть, даже картинку нарисуй.

--------------------

* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

eLDeR	۩ Дата
Пользователь Профиль Группа: Форумчанин Сообщений: 74 Пользователь №: 18969 На форуме: 15 лет, 7 месяцев, 20 дней Карма:	Сейчас так: Могу указать прямую ссылку на страницу, если тут разрешено

sergeiss

Дата

Сидел он, дум великих полон - и вдаль глядел

Профиль
Группа: Эксперт
Группа переписки

Сообщений: 15860
Пользователь №: 4190
На форуме: 17 лет, 2 месяца, 22 дня
Карма: 490

Цитата (eLDeR @ 4.03.2015 - 17:44)

Могу указать прямую ссылку на страницу, если тут разрешено

Не запрещено

Но фенька в том, что у меня твой код, взятый без изменений, показывает эти 3 элемента на одной горизонтали. То есть так, как ты хочешь.

Браузер какой у тебя? Я смотрю в Опере 27.

Полный код страницы, как я ее сделал

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>
div.allpagelist {
width: 100%;
}

div.allpagelist div.page-list-ext-item {
width: 300px;
height: 200px;
display: block;
float: left;
border: 1px solid #444;
margin:0;
padding:0;
}
</style>
</head>

<body>
<div class="page-list page-list-ext allpagelist">
<div class="page-list-ext-item"><hr class='style-two'>
<div class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-010/" title="Баня Б-010"><img src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_010_mini-150x150.jpg" width="100" alt="Баня Б-010" /></a></div>
<h3 class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-010/" title="Баня Б-010">Баня Б-010</a></h3>
<div class="page-list-ext-item-content">Одноэтажная баня (7,35м х 9,1м). Парная. Душевая. Комната отдыха. Терраса. Тамбур.</div>
</div>
<div class="page-list-ext-item"><hr class='style-two'>
<div class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-009/" title="Баня Б-009"><img src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_009_mini-150x150.jpg" width="100" alt="Баня Б-009" /></a></div>
<h3 class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/b-b-009/" title="Баня Б-009">Баня Б-009</a></h3>
<div class="page-list-ext-item-content">Двухэтажная баня (6м х 7м). Парная. Бассейн. Душевая. Раздевалка. Комната отдыха. Крыльцо. Мансарда. Балкон.</div>
</div>
<div class="page-list-ext-item"><hr class='style-two'>
<div class="page-list-ext-image"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/banya-b-008/" title="Баня Б-008"><img src="http://stroi-servis-mr.ru/wp-content/uploads/2015/03/b_008_mini-150x150.jpg" width="100" alt="Баня Б-008" /></a></div>
<h3 class="page-list-ext-title"><a href="http://stroi-servis-mr.ru/proekty/proekty-ban/banya-b-008/" title="Баня Б-008">Баня Б-008</a></h3>
<div class="page-list-ext-item-content">Одноэтажная баня (5,7м х 5,4м). Душевая. Парная. Комната отдыха. Крыльцо. Тамбур.</div>
</div>
<div>

</body>
</html>

Это сообщение отредактировал sergeiss - 4.03.2015 - 17:59

--------------------

eLDeR	۩ Дата
Пользователь Профиль Группа: Форумчанин Сообщений: 74 Пользователь №: 18969 На форуме: 15 лет, 7 месяцев, 20 дней Карма:	Ссылка на страницу: http://stroi-servis-mr.ru/all-project/ Сам пользуюсь яндексом (в опере также)

Winston	Дата
④ Профиль Группа: Эксперт Сообщений: 9509 Пользователь №: 18161 На форуме: 15 лет, 10 месяцев, 4 дня Карма: 552	В стиле .page-list-ext .page-list-ext-item { clear: both; margin: 10px 0 30px 0; } убрать clear: both;

sergeiss	Дата
Сидел он, дум великих полон - и вдаль глядел Профиль Группа: Эксперт Сообщений: 15860 Пользователь №: 4190 На форуме: 17 лет, 2 месяца, 22 дня Карма: 490	Винстон опередил, пока я писал :) Проблема в том, что ты указал не все стили, относящиеся к используемым элементам. У тебя есть еще вот такая хреновина .page-list-ext .page-list-ext-item { clear: both; margin: 10px 0 30px 0; } Убери тут "clear: both;" и оно будет работать так, как надо. -------------------- * Хэлп по PHP * Описалово по JavaScript * Хэлп и СУБД для PostgreSQL * Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги. * "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

eLDeR	۩ Дата
Пользователь Профиль Группа: Форумчанин Сообщений: 74 Пользователь №: 18969 На форуме: 15 лет, 7 месяцев, 20 дней Карма:	спасибо ))