Вы здесь

как эти 4 diva поставить в одну линию

-6
    <section class="main">
            <ul class="ch-grid">
                <li>
                          <div class="ch-item ch-img-1">
                        <div class="ch-info">
                            <h3>Не упусти</h3>
                        </div>
                    </div>
                </li>
                                 <font size="5" color="#ff7581" face="Impact ">ВТОРНИК<br /></b></font>
                                 <font size="3" color="#3b2530" face="Courier New ">скидка 25%.</font>
                <li>
                          <div class="ch-item ch-img-2">
                        <div class="ch-info">
                            <h3>Только для тебя</h3>
                        </div>
                    </div>
                </li>
                                   <font size="5" color="#ff7581" face="Impact">ВТОРНИК<br /></font>
                                   <font size="3" color="#3b2530" face="Courier New ">скидка 25%.</font>
                 <li>
                                                   <div class="ch-item ch-img-3">
                        <div class="ch-info">
                            <h3>Ждем вас</h3>
                        </div>
                    </div>
                </li>
                                  <font size="5" color="#ff7581" face="Impact">ЧЕТВЕРГ<br /></font>
                                  <font size="3" color="#3b2530" face="Courier New ">скидка 25%</font>
                                     <li>
                            <div class="ch-item ch-img-4">
                        <div class="ch-info">
                            <h3>Успей записаться</h3>
                        </div>
                    </div>
                </li>
                                    <font size="5" color="#ff7581" face="Impact">СУББОТА<br /></font>
                                    <font size="3" color="#3b2530" face="Courier New ">скидка 25%/font>
            </ul>
                    </section>

в css каждому классу прописывал float:left; не помогло!
если уберу
СУББОТА

скидка 25%/font>
с каждого дива то они встанут в одну линию

Версия Drupal: 
7.x
Категория: 
HTML/CSS
Вопрос задан 14.10.2015 - 16:33

Ответы

4
Ответ дан 14.10.2015 - 17:35
1
float: left;
width: 25%;
Ответ дан 14.10.2015 - 23:27

width: 25% - не фиксированная ширина

а при учёте бордеров и отступов - для четырёх блоков не катит

Комментарий оставлен 15.10.2015 - 14:29

это лишь пример, никто не мешает вам его доработать под конкретную ситуацию

Комментарий оставлен 15.10.2015 - 17:37
0

но ведь блок то расположен в элементе списка,
так список и нужно в линию:

ul.ch-grid li {
  display: inline-block;
}  

вместо font использовать span (и соответствующие стили для шрифтов), поместить его во внутрь li

возможно, стоит дать сим элементам width: 25%;

но, на мелких экранах они должны быть вертикальным списком - иначе будет не читабельно.

Ответ дан 14.10.2015 - 16:39

круги пропадают,в li не вариант засовывоть!тогда дни недели будут появляться при наведении на круги!

Комментарий оставлен 14.10.2015 - 16:59
0

font size="5" color="#ff7581" face="Impact" - давно такого не видел ... ))

float:left и фиксированная ширина (не шибко гигантская) для каждого блока - стопудово решают задачу

Ответ дан 14.10.2015 - 21:20
Аватар пользователя Pavel
Pavel
-47

учите матчасть
вам уже рекомендовали... ))

Комментарий оставлен 16.10.2015 - 05:40
0

я нашел решение!запихнул в ли и поставил текстовый обзац
вот так это выглядит

Ответ дан 15.10.2015 - 09:06

<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Не упусти,только для тебя</h3>
</div>
</div>
<br></br>
<p><font size="5" color="#ff7581" face="Impact ">ПОНЕДЕЛЬНИК-ВТОРНИК<br /></b></font></p>
<p><font size="3" color="#3b2530" face="Courier New ">текст текст</font></p>
<br></br>
</li>

Комментарий оставлен 15.10.2015 - 17:08

<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3>Не упусти,только для тебя</h3>
</div>
</div>
<br></br>
<p><font size="5" color="#ff7581" face="Impact ">ПОНЕДЕЛЬНИК-ВТОРНИК<br /></b></font></p>
<p><font size="3" color="#3b2530" face="Courier New ">текс текст</font></p>
<br></br>
</li>

Комментарий оставлен 15.10.2015 - 17:09

запихнул в ли

дошло таки...
начинай учить html)))

Комментарий оставлен 15.10.2015 - 18:33