Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
1

Выполнить блок как на картинке

17.01.2018, 18:49. Показов 1079. Ответов 21
Метки нет (Все метки)

Помогите выполнить блок как на картинке. Перепробовал все, не могу сообразить как сделать
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Миниатюры
Выполнить блок как на картинке  
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
17.01.2018, 18:49
Ответы с готовыми решениями:

Как сверстать такой блок как на картинке?
помогите сверстать блок как на картинке надо чтобы блок был адаптивен!

Подскажите как выполнить,не могу понять, составите код и блок схему. спасибо
Подскажите как выполнить,не могу понять, составите код и блок схему. спасибо.Напечатать значения...

. Разработать алгоритм в виде блок-схемы и программу вычисления значения функции , приведенной на картинке
. Разработать программу вычисления значения функции , приведенной на картинке

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

21
dev - investigator
Эксперт JSЭксперт HTML/CSS
2138 / 1484 / 650
Регистрация: 16.04.2016
Сообщений: 3,694
17.01.2018, 18:59 2
Towa73,
Цитата Сообщение от Towa73 Посмотреть сообщение
Перепробовал все
- нет не все. Повернуть блок посредством transform - это раз.
И ....
CSS
1
writing-mode:tb-rl;
- это два.
0
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
17.01.2018, 19:04  [ТС] 3
Qwerty_Wasd, А можно полный код?)
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2138 / 1484 / 650
Регистрация: 16.04.2016
Сообщений: 3,694
17.01.2018, 19:41 4
Towa73,
1.
HTML5
1
<span>blablabla</span>
CSS
1
span{writing-mode:tb-rl;}
2.
HTML5
1
<div>blablabla</div>
CSS
1
div{display:inline-block;transform:rotate(90deg);}
0
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
17.01.2018, 19:46  [ТС] 5
Qwerty_Wasd, нет, это не то, проблема не в переворачивание блока в создание его с нуля
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2138 / 1484 / 650
Регистрация: 16.04.2016
Сообщений: 3,694
17.01.2018, 19:47 6
Towa73, поясните
Цитата Сообщение от Towa73 Посмотреть сообщение
в создание его с нуля
0
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
17.01.2018, 19:56  [ТС] 7
Qwerty_Wasd, Вы можете помочь создать такой блок? имеется ввиду по картинке
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2138 / 1484 / 650
Регистрация: 16.04.2016
Сообщений: 3,694
17.01.2018, 20:03 8
Towa73, без обид, но там каракули. Понять не могу что написано. Вижу повернутый блок на 90 градусов. В нем текстовый узел. Два символа имеют бордер. Все верно?
0
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
17.01.2018, 20:10  [ТС] 9
Вот сейчас понятно?)
0
Миниатюры
Выполнить блок как на картинке   Выполнить блок как на картинке  
dev - investigator
Эксперт JSЭксперт HTML/CSS
2138 / 1484 / 650
Регистрация: 16.04.2016
Сообщений: 3,694
17.01.2018, 20:42 10
Лучший ответ Сообщение было отмечено Towa73 как решение

Решение

Towa73, В разы. Пример - Песочница
HTML5
1
<div class="wrap"><span>Команда 1</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K1"/><span>10</span><span>VS</span><span>10</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K2"/><span>Команда 2</span></div>
CSS
1
2
.wrap{display:inline-block;transform:rotate(90deg);border:1px solid black;padding:5px;margin:200px 10px;}
span{position:relative;top:-20px;margin:0 5px;}
1
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
17.01.2018, 20:44  [ТС] 11
А если по горизонтали сделать? Как быть
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2138 / 1484 / 650
Регистрация: 16.04.2016
Сообщений: 3,694
17.01.2018, 21:09 12
Towa73,
CSS
1
2
.wrap{display:inline-block;border:1px solid black;padding:5px;margin:200px 10px;}
span{position:relative;top:-20px;margin:0 5px;}
0
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
18.01.2018, 03:12  [ТС] 13
Qwerty_Wasd, А ты можешь помочь расположить текст чуть выше текста!?

Страница - http://cscfg.ru/boston-major-2018

Хочу сделать ДАТУ чуть выше VS

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="games-page">
 
<teamwin>Vega Squadron</teamwin>
<img src="/games/Vega_Squadron.png" alt="Vega Squadron">
<score>16</score>
<date> 12.01.2018 </date>
<vs>VS</vs>
<score>14</score>
<img src="/games/Renegades.png"alt="Renegades">
<teamlose>Renegades</teamlose>
 
</div>
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
.games-page {
 display:inline-block;
 height:80px;
 background:#f2f2f2;
 margin-bottom: 30px;
 overflow:hidden;
 color:#4a4a4a;
 width:900px;
 text-transform: uppercase;
 text-align: center;
 line-height: 80px;
}
 
.games-page img{
 height:60px;
 padding:10px;
}
 
.games-page score {
 font: bold 16px "Roboto Condensed";
 margin:0 15px;
 top:-34px;
 position:relative;
}
 
.games-page date {
 font: normal 14px "Roboto Condensed";
 top:-14px;
 position:relative;
}
 
.games-page vs {
 font: normal 16px "Roboto Condensed";
 margin:0 15px;
 top:-24px;
 position:relative;
}
 
.games-page teamwin {
 font: bold 16px "Roboto Condensed";
 margin:0 15px;
 top:-34px;
 position:relative;
}
 
.games-page teamlose {
 font: normal 16px "Roboto Condensed";
 margin:0 15px;
 top:-34px;
 position:relative;
}
Добавлено через 12 минут
Qwerty_Wasd, Есть ли возможность сделать так, чтобы текст "VS" был везде по центру, то есть во всех блоках?
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2138 / 1484 / 650
Регистрация: 16.04.2016
Сообщений: 3,694
18.01.2018, 06:58 14
Towa73, к примеру - Песочница
HTML5
1
<div class="wrap"><span>Команда 1</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K1"/><span>10</span><span id="vs">VS</span><span id="time">16.01.2018 6:30</span><span>10</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K2"/><span>Команда 2</span></div>
CSS
1
2
3
4
.wrap{position:relative;display:inline-block;border:1px solid black;padding:15px;margin:200px 10px;}
span{position:relative;top:-20px;margin:0 5px;}
#vs{margin:0 50px;}
#time{position:absolute;top:0;left:50%;transform:translateX(-50%);}
0
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
18.01.2018, 11:14  [ТС] 15
Qwerty_Wasd, Есть ли возможность сделать так, чтобы текст "VS" был везде по центру, то есть во всех блоках?
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2138 / 1484 / 650
Регистрация: 16.04.2016
Сообщений: 3,694
18.01.2018, 11:33 16
Towa73, пост выше
0
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
18.01.2018, 14:53  [ТС] 17
Qwerty_Wasd, Пытался переделать твой код под свой, не получается. Посмотри что выходит http://cscfg.ru/boston-major-2018

Добавлено через 12 минут
Qwerty_Wasd, А что если основной блок DIV разделить на три секции?
Как думаешь сработает?
0
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
18.01.2018, 14:54  [ТС] 18
Вот что получается
0
Миниатюры
Выполнить блок как на картинке  
0 / 0 / 0
Регистрация: 13.07.2016
Сообщений: 213
18.01.2018, 17:04  [ТС] 19
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
.games-page {
 display:inline-block;
 height:80px;
 background:#f2f2f2;
 margin-bottom: 24px;
 overflow:hidden;
 color:#4a4a4a;
 width:900px;
 text-transform: uppercase;
 text-align: center;
 line-height: 80px;
}
 
.games-page img{
 height:60px;
 padding:10px;
}
 
.games-page score {
 font: bold 16px "Roboto Condensed";
 top: -34px;
 position:relative;
}
 
.games-page date {
 font: normal 13px "Roboto Condensed";
 top: -54px;
 position: relative;
}
 
.games-page vs {
 font: normal 16px "Roboto Condensed";
 margin:0 15px;
 top:-24px;
 position: relative;
}
 
.games-page teamwin {
 font: bold 16px "Roboto Condensed";
 margin:0 15px;
 top:-34px;
 position:relative;
}
 
.games-page teamlose {
 font: normal 16px "Roboto Condensed";
 margin:0 15px;
 top:-34px;
 position:relative;
}
0
dev - investigator
Эксперт JSЭксперт HTML/CSS
2138 / 1484 / 650
Регистрация: 16.04.2016
Сообщений: 3,694
18.01.2018, 17:14 20
Towa73,
Цитата Сообщение от Towa73 Посмотреть сообщение
Пытался переделать твой код под свой
смотрим еще внимательнее,
вот что получается у меня(скрин) - Песочница
HTML5
1
2
3
4
<div class="wrap"><span>Команда 1</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K1"/><span>10</span><span id="vs">VS</span><span id="time">16.01.2018 6:30</span><span>10</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K2"/><span>Команда 2</span></div>
<div class="wrap"><span>Команда 1</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K1"/><span>10</span><span id="vs">VS</span><span id="time">16.01.2018 6:30</span><span>10</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K2"/><span>Команда 2</span></div>
<div class="wrap"><span>Команда 1</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K1"/><span>10</span><span id="vs">VS</span><span id="time">16.01.2018 6:30</span><span>10</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K2"/><span>Команда 2</span></div>
<div class="wrap"><span>Команда 1</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K1"/><span>10</span><span id="vs">VS</span><span id="time">16.01.2018 6:30</span><span>10</span><img src="https://dummyimage.com/50x50/a6a6a6/000000.png&amp;text=K2"/><span>Команда 2</span></div>
CSS
1
2
3
4
.wrap{position:relative;display:inline-block;border:1px solid black;padding:15px;margin:10px 10px;}
span{position:relative;top:-20px;margin:0 5px;}
#vs{margin:0 50px;}
#time{position:absolute;top:0;left:50%;transform:translateX(-50%);}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.01.2018, 17:14

Выполнить проверку вручную (такое задание) и составить блок схему
Вот мое задание: Вычислить и вывести на экран в виде таблицы значения функции F на интервале от Х...

Независимо от того, сработало исключение или нет, в конце выполнить блок кода
как сделать так, чтобы независимо от того, сработало исключение или нет, в конце выполнился блок...

Как изменить этот код так чтобы нарисовалась фигура как на картинке
Как изменить этот код так чтобы нарисовалась фигура как на картинке...

Как сделать так, чтобы было как на картинке?
Всем привет. Как сделать так, чтобы в поисковике выдавало как на картинке? Ато у меня пару ссылок...


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

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

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