Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Съезжают блоки при разном разрешении экрана

Съезжают блоки при разном разрешении экрана


     10.01.2014    Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)    2117

вопрос
Сделал блоки в четыре колонки, но при разных разрешениях экрана они смотрятся очень криво. Как с этим справиться?
Вот, для примера, что происходит при разрешении 1024 x 768.


Вот shortstory
<div class="viewn_cont">              
      <div style="width:25%;float:left;">
      <div class="short-story">
          <span class="img-size"><a href="{full-link}">{short-story}</a></span>
          <div class="price"><center><b>[xfvalue_price] руб.</b></center></div>
      </div>
      </div>
</div>  

Ответа пока нет


Комментарии пользователей (11)

KAPTMEH
28 | 4

KAPTMEH - 10 января 2014 14:55 - Юзер

Попробуйте так

<div class="viewn_cont">              
      <div style="width:25%;float:left;">
      <div class="short-story">
          <span class="img-size"><a href="{full-link}">{short-story}</a></span>
          <div class="price"><center><b>[xfvalue_price] руб.</b></center></div>
      </div>
      </div>
      <div style="clear:both;"></div>
</div>

ale-eex
20 | 1

ale-eex - 10 января 2014 15:02 - Юзер

Все блоки выравнялись в одну строку. Вот и все =(

KAPTMEH
28 | 4

KAPTMEH - 10 января 2014 15:05 - Юзер

А у блока в котором находятся эти новости ширина указана?
Который сужается на скрине
В личку киньте ссылку на сайт

ale-eex
20 | 1

ale-eex - 10 января 2014 15:10 - Юзер

Вроде бы нет.

D0Gmatist
225

794 | 281

D0Gmatist - 10 января 2014 15:17 - Местный

Как по мне то float:left; и float:right; корявые для использования в таких случаях ...

я всегда использую display: inline-table;
Пример

если нужно выравнивание по верху то дописываем vertical-align: top;
Пример

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

KAPTMEH
28 | 4

KAPTMEH - 10 января 2014 15:24 - Юзер

Структура построения новости неправильная зачем viewn_cont див? Удалите его, гляньте, либо пропишите ему высоту и ширину...

KAPTMEH
28 | 4

KAPTMEH - 10 января 2014 15:42 - Юзер

Или вот тут поменяйте значение min-height на большое, а вообще не правильно использовать стили прям в html...

<div class="side_center input_style" role="main" style="min-height: 429px;">

KAPTMEH
28 | 4

KAPTMEH - 10 января 2014 15:59 - Юзер

Ещё бы я убрал float:left; из этой строки <div style="width:25%;float:left;"> и прописал её к диву с классом viewn_cont

ale-eex
20 | 1

ale-eex - 10 января 2014 17:53 - Юзер

Ничего не помогает...

ale-eex
20 | 1

ale-eex - 12 января 2014 10:40 - Юзер

Ладно, видимо ничего с этим не поделать =(

D0Gmatist
225

794 | 281

D0Gmatist - 12 января 2014 11:29 - Местный

Можно .. руки на рельсу и ждать ТУ-ТУуууу )))

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы