Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/15: Рейтинг темы: голосов - 15, средняя оценка - 4.80
1 / 1 / 3
Регистрация: 27.12.2012
Сообщений: 192
1

Высота блока при адаптивной верстке

14.07.2016, 18:12. Показов 2876. Ответов 3
Метки нет (Все метки)

Всем мир. Страница с 4 блоками в ряд. При мобильной версии возникает такая хня (скриншот). Задать высоту блока не вариант, высота изменится на обычных мониторах. Какой вариант можно использовать для мобилок?
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<? $i=0; foreach($arResult["ITEMS"] as $arItem): ?> 
<div class="one-news-block news-block">
             <a href="<?=$arItem["DETAIL_PAGE_URL"]?>">
                 <div class="img" style="background-image:url(<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>);"></div>
             </a>
            <div class="date"><?=$arItem["DISPLAY_ACTIVE_FROM"]?></div>
            <a href="<?=$arItem["DETAIL_PAGE_URL"]?>"><div class="title"><?echo $arItem["NAME"]?></div></a>
            <div class="desc"><?=$arItem["PREVIEW_TEXT"]?></div>
</div>
    <? if($i==3){
    echo '<div class="clear"></div>'; $i=0;
}
    else{
        $i++;
    }?>
<? endforeach;?>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
div.news-list
{
    word-wrap: break-word;
}
div.news-list img.preview_picture
{
    float:left;
    margin:0 4px 6px 0;
}
.parent_one-block{
    margin-top:40px;
}
.news-content {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 20px;
}
.news-date-time {
    color:#486DAA;
}
.one-news-block {
    float: left;
    width: calc(25% - 10px);
    margin-right: 10px;
    margin-bottom: 30px;
}
a, a:link, a:visited {
    text-decoration: none;
}
.news-block .img {
    display: block;
    width: 100%;
    height: 200px;
    border-bottom: 4px solid #65b22f;
    margin-bottom: 25px;
    border-radius: 5px 5px 0 0;
    background-position: center;
    background-size: cover;
}
.news-block .date {
    color: #009608;
    font-size: 1rem;
    line-height: 1.2rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.news-block .title {
    font-family: Cambria;
    color: #252525;
    font-size: 1.8rem;
    line-height: 2rem;
    margin-bottom: 10px;
    font-weight: bold;
    text-decoration: none;
}
.news-block .desc {
    color: #676767;
    font-size: 1.4rem;
    line-height: 1.6rem;
}
@media (min-width:320px) and (max-width:479px) {
    .one-news-block{
        float: none;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
 
@media (min-width:480px) and (max-width:767px){
    .one-news-block{
        width: 47%;
    }
    .desc{
        height: ;
        overflow: hidden;
    }
}
@media (min-width:768px) and (max-width:1023px){
    .one-news-block{
        width: 33.33333%;
    }
}
0
Миниатюры
Высота блока при адаптивной верстке  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.07.2016, 18:12
Ответы с готовыми решениями:

Высота блоков в адаптивной верстке
Есть код: &lt;div class=&quot;links&quot;&gt; &lt;div class=&quot;link1&quot;&gt;&lt;/div&gt; &lt;div class=&quot;link2&quot;&gt;&lt;/div&gt; ...

Высота обтекающего блока в двухколоночной верстке
Добрый вечер. Подскажите пожалуйста как решить следующую проблему: есть 2 колонки - левое меню и...

Aside при адаптивной верстке
Здравствуйте. При сужении экрана надо чтобы один блок из сайдбара переместился над блоком контента,...

Меню при адаптивной верстке
Изучаю css не получается нормально адаптировать меню что бы в адаптивной верстке полностью...

3
Модератор
Эксперт JSЭксперт HTML/CSS
3613 / 2529 / 1489
Регистрация: 12.07.2015
Сообщений: 6,481
Записей в блоге: 4
14.07.2016, 18:37 2
Php код это хорошо, но лучше сымитируйте вывод в html и тогда и нам удобнее будет, и вам быстрее решение найдется
И что именно возникает в мобильной версии? Что должно быть вместо отступа?
0
1 / 1 / 3
Регистрация: 27.12.2012
Сообщений: 192
14.07.2016, 18:43  [ТС] 3
mrtoxas, http://mediline.prostoagency.ru/about/news/ вот ссылка и включите разрешение мобилок и моя проблема станет ясна
0
Модератор
Эксперт JSЭксперт HTML/CSS
3613 / 2529 / 1489
Регистрация: 12.07.2015
Сообщений: 6,481
Записей в блоге: 4
14.07.2016, 19:10 4
Вот, посмотрите на реализацию адаптивного вывода блоков, может подсмотрите себе что-то:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
*,
*:before,
*:after {
  box-sizing: border-box !important;
}
 
article {
  -moz-column-width: 13em;
  -webkit-column-width: 13em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
}
 
section {
  display: inline-block;
  margin: 0.25rem;
  padding: 1rem;
  width: 100%;
  background: #efefef;
}
 
p {
  margin: 1rem 0;
}
 
/*  styles for background color, etc; not necessary for this thing to work  */
body {
  padding: 1em;
  font-family: "Garamond", serif;
}
 
h1 {
  font-size: 3rem;
  font-weight: 800;
}
 
body {
  line-height: 1.25;
}
 
p {
  text-align: left;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<h1>Pure CSS Masonry</h1>
<p>By using CSS3 columns, we can easily create a Masonry.js-like layout where random-height blocks fit together.</p>
<article>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error aliquid reprehenderit expedita odio beatae est.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat suscipit ad.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nihil alias amet dolores fuga totam sequi a cupiditate ipsa voluptas id facilis nobis.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem ut debitis dolorum earum expedita eveniet voluptatem quibusdam facere eos numquam commodi ad iusto laboriosam rerum aliquam.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat architecto quis tenetur fugiat veniam iste molestiae fuga labore!</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit accusamus tempore at porro officia rerum est impedit ea ipsa tenetur. Labore libero hic error sunt laborum expedita.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima asperiores eveniet vero velit eligendi aliquid in.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus dolorem maxime minima animi cum.</p>
  </section>
</article>
Пример
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
14.07.2016, 19:10

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Дефолтная ширина для мобильников при адаптивной верстке
С одним человеком у нас возник разговор - он утверждал, что ему в макете достаточно ширины 400px, я...

Как управлять расположением блоков при адаптивной верстке ?
Есть 3 блока, они все стоят в ряд. При ресайзе на определенное разрешение нужно взять центровой...

При адаптивной верстке получаеться что ширина экрана не 480х800, а 320х 533 Как с этим бороться?
При адаптивной верстке получаеться что ширина экрана не 480х800, а 320х 533 Как с этим бороться....

Валидность в адаптивной верстке
Имеются встроенные в основной css файл media queries: @media screen and (min-width:200px) and...

Изображения в адаптивной верстке
Друзья как прописать размеры изображений для монитора 1024px...

Флеш .swf в адаптивной верстке
На сайте есть страницы с презентациями, код ниже. В адаптивной верстке (под мобильные) на обычных...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.