Как расположить блоки?

Question

[Chasing]

Всем привет

Недавно начал верстку сайта по аналогии с другим и мне необходимо было аналогично расположить блоки, но до конца не вышло. Не подскажите что мне поправить, чтобы было как задумано?

Мой сайт: voten.ru/Nixioutlet
Сайт, на котором отображается все отлично www.elegant.ru

Спасибо

Answer 1

[Евгений Петров]

1. Копируйте тщательней. Не нужно заменять display:inline-block на float:left. Это сделано не просто так (подсказка vertical-align:top).

Вот вам картинка для понимания:



2. Вам нужно следить за размерами контента в разделённых блоках. Либо квадратная картинка с шириной 100%, либо как в оригинале paddint-top:100% (задумайтесь, почему) и внутренний контент, выпадающий из нормального потока.

Answer 2

[Анна Бакурова]

На том сайте что Вы в пример приводите блоки main_block одинаковой высоты и создаётся впечатление что они разбросаны, а на самом деле там одинаковые по высоте и ширине стоят друг за другом.
Вам с Вашей же задумкой следует создать два блока width 50% - это колонки и уже в колонках вставлять блоки main_block

Comments

[Анна Бакурова]

не имеет смысла inline-block и float left писать одному блоку

[Анна Бакурова]

float убьёт все прелести inline-block

[Chasing]

Спасибо за ваш ответ. Сделал немного по другому и блоки встали как надо, но появился один момент.
Если я просто вставлю картинку в блок, то она не будет тянуться по вертикали, мне приходится вырезать нужного размера картинки и тогда все работает как надо.
Как думаете, в чем проблема?

voten.ru/Nixioutlet Обновленная версия

[Анна Бакурова]

@Chasing во первых для product-link { display: block; } Во вторых вам нужно прописать высоту в px (статичную а не резиновую). Потом Вам блок product не нужен, можете его убрать и присвоить класс product для ссылки которая в нём. - нам лишний блок тут не нужен. vertical-align: middle; для картинки тоже ни к чему. И вообще структура примерно такая
.little_block > a > img и .big_block > a > img
для little_block высота к примеру 300 а для big_block тогда 600 у ссылки position: relative: width: 100%; height: 100%; display: block; overflow: hidden;
у img width: 100%; height: auto; - как то так

[Chasing]

@Libris Спасибо, попробую

[Chasing]

@Libris Вроде пока с картинками разобрался, но есть в другом вопрос.
У меня минимальная ширина страницы 1024px, в хроме при эмуллировании девайса с шириной в 1024px горизонтального скролла нет, а если просто уменьшить окно браузера до 1024px то скролл есть, думаю проблемы в шапке.
Есть идеи по поводу этого?

[Анна Бакурова]

@Chasing
#layout {
min-height: 100%;
min-width: 1024px;
}
уберите или измените min-width: 1024px;

[Chasing]

@Libris Это хороший план, но мне надо поставить свойство так, чтобы начинался горизонтальный скролл именно с 1024px, а сейчас он начинает раньше и никак не могу разобраться в чем дело(

[Chasing]

@Libris Хмм странно, вбил через консоль команды при разных размерах окна и выяснилось что откуда-то появляются 17px

[Анна Бакурова]

@Chasing это ширина скролла у вас