Форум программистов, компьютерный форум, киберфорум
Наши страницы
Joomla
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
jigernaut
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 20
#1

Как сделать 3 тега div в одну строку? (CSS)

03.06.2014, 12:53. Просмотров 1075. Ответов 6
Метки нет (Все метки)

хочу сделать резиновый подвал с помощью css, использую div и вот такая проблема,при уменьшении окна браузера, теги div переносятся вниз.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
 <body>
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
</body>
</html>
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
    #col1 {
    float:left;
    width:698px;    
    width: 33,3%; 
    height:200px;
     background:url(1.jpg) no-repeat;
    background-size:100%;
    
   }
 #col2 {
    float:left;
width:698px;
    width: 33,3%; 
 
    height:200px;
     background:url(2.jpg) no-repeat;
    background-size:100%;
    
   }
   #col3 {
    float:left;
width:698px;
 
    width: 33,3%;
    ;
    height:200px;
     background:url(3.jpg) no-repeat ;
    background-size:100%;
   }
0
Миниатюры
Как сделать 3 тега div в одну строку? (CSS)   Как сделать 3 тега div в одну строку? (CSS)  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
03.06.2014, 12:53
Ответы с готовыми решениями:

Как сделать новости на главной в одну колонку?
сейчас новости отображаются в 3 колонки, хотелось бы в одну

CSS: как breadcrumb сделать горизонтальным?
Сайт: bestekosmetik.ru. подскажите, пожалуйста, как breadcrumb горизонтальным...

Как в модуле "Материалы - Самые читаемые" сделать вывод ссылок в две колонки, а не в одну?
Как в модуле &quot;Материалы - Самые читаемые&quot; сделать вывод ссылок в две колонки, а...

Как выровнять div в одну строку при условии что обварачивающий div с auto размерами?
Доброго времени суток коллеги! Подскажите пожалуйста такую вещь: есть div...

CSS!? Div в div'e, как не потерять позиции css внутреннего div'a при изменении размера браузера?
вот когда изменяю размер браузера, то внутренний div не хочет изменяться вместе...

6
jigernaut
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 20
03.06.2014, 12:57  [ТС] #2
пожалуйста помогите решить эту проблему
0
motokraft
138 / 138 / 29
Регистрация: 06.08.2013
Сообщений: 878
Записей в блоге: 3
03.06.2014, 13:21 #3
col1 - выравнивание слева
col2 - выравнивание по центру
col3 - выравнивание справа

Добавлено через 1 минуту
есть еще вариант это использовать таблицу без указанной ширины
0
Hagacure
26 / 26 / 9
Регистрация: 02.01.2011
Сообщений: 135
Записей в блоге: 1
09.06.2014, 01:13 #4
CSS
1
display : inline;
0
Taatshi
Администратор
11709 / 5052 / 257
Регистрация: 05.04.2011
Сообщений: 13,803
Записей в блоге: 2
09.06.2014, 22:07 #5
min-width для body задайте
0
jigernaut
0 / 0 / 0
Регистрация: 19.12.2013
Сообщений: 20
10.06.2014, 09:32  [ТС] #6
спасибо
0
Lovrentiy
161 / 161 / 11
Регистрация: 07.09.2011
Сообщений: 995
10.06.2014, 21:04 #7
CSS
1
2
3
4
5
6
7
{
display:inline-block;
width:33%;
border:none;
margin:0;
padding:0;
}
0
10.06.2014, 21:04
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.06.2014, 21:04

Как сделать вот такой макет через html и css (div и css)
Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на...

Есть 2 файла html и css как мне сделать чтоб файл css распространялся на одну ячейку а не на все
&lt;table class=&quot;s&quot;&gt; &lt;tr&gt; &lt;link rel=&quot;stylesheet&quot;...

Как поместить 2 <div> в одну строку?
первый див - параграф, второй картинка. картинка почему-то уходит под 1 див ...


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

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

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