0 / 0 / 0
Регистрация: 18.11.2016
Сообщений: 116
1

Как задать определенное положение тексту или картинке

09.02.2017, 12:41. Показов 2539. Ответов 10
Метки нет (Все метки)

Всем привет нужно конкретный размер сделать как на фото как вообще делать в дивах? а текст br?
Миниатюры
Как задать определенное положение тексту или картинке  
__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
09.02.2017, 12:41
Ответы с готовыми решениями:

Как задать тексту возможное положение?
как исключить такое расположение текста

Ребят как вставить гиперссылку в определённое место в картинке
Ребят, как мне вставить ссылку в определённое место на картинке? Т.е. поделить картинку на две...

Как установить курсор в определенное положение в тексте?
Подскажите пожалуйста как установить курсор в определенное положение в тексте???

Распознавание номеров автомобилей: как определить положение номера на картинке
Всем привет. Вот начел изучать о компютерном зрении. И тут заинтересовала проект о "Распознавание...

10
25 / 25 / 19
Регистрация: 13.07.2015
Сообщений: 433
09.02.2017, 17:32 2
4 дива в которых картинка и текст. Текст просто в <p>
0
0 / 0 / 0
Регистрация: 18.11.2016
Сообщений: 116
09.02.2017, 18:39  [ТС] 3
У меня они все по вертикали отображаются
Миниатюры
Как задать определенное положение тексту или картинке  
0
202 / 138 / 88
Регистрация: 21.12.2014
Сообщений: 369
09.02.2017, 18:42 4
CSS
1
display: inline-block;
1
5 / 5 / 1
Регистрация: 16.07.2016
Сообщений: 29
09.02.2017, 18:52 5
То, как они у вас отображаются (друг за другом, сверху вниз) - это стандартный поток документа. Для его изменения есть множество способов, например, как уже написали выше, задать этим дивам display: inline-block;. Но тогда нужно не забыть убрать пробелы, которые вылезают между блочно-строчными элементами, для этого тоже есть разные способы. Или же можно задать блоку, в котором лежат эти четыре маленьких блочка, display: flex;, это превратит их самих во флекс-элементы, и у вас будет миллион разных способов, как их дальше выровнять. А <p> с текстом просто задаёте нужную ширину, без всяких <b>.
1
0 / 0 / 0
Регистрация: 18.11.2016
Сообщений: 116
09.02.2017, 21:05  [ТС] 6
Текст не там где нужно чем его подвинуть? для картинок использовал флекс вот часть кода
HTML5
1
2
3
4
<div>
 <img src="http://nslovo.com/wp-content/uploads/2017/01/8e57cd862799-75x75.jpg" alt="«Золотий Фенікс*» ‬розправляє крила"  width="75" height="75">  
    <a class="text" href="#" title="«Золотий Фенікс*» ‬розправляє крила" width="20px">«Золотий Фенікс*» ‬розправляє крила</a>
    </div>
Миниатюры
Как задать определенное положение тексту или картинке  
0
5 / 5 / 1
Регистрация: 16.07.2016
Сообщений: 29
09.02.2017, 21:21 7
Цитата Сообщение от Fuzy Посмотреть сообщение
Текст не там где нужно чем его подвинуть?
Аналогично с тем, что вы сделали до этого. Можно сделать эти четыре дива флекс-контейнерами, можно элементы внутри них сделать инлайн-блоками и т.д.
Советую почитать про поток документа, блочную модель и построение сеток, избавите себя от многих подобных вопросов.
1
202 / 138 / 88
Регистрация: 21.12.2014
Сообщений: 369
09.02.2017, 21:26 8
Лучший ответ Сообщение было отмечено mrtoxas как решение

Решение

Флексы довольно мудреные, новичок не потянет сходу думаю, но я на флексах сделал: https://jsfiddle.net/b5xfaaby/
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
<div class="wrapper">
  <a href="#">
    <img src="http://nslovo.com/wp-content/uploads/2017/01/8e57cd862799-75x75.jpg" alt="«Золотий Фенікс*» ‬розправляє крила" width="75" height="75">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit repudiandae</span>
  </a>
</div>
<div class="wrapper">
  <a href="#">
    <img src="http://nslovo.com/wp-content/uploads/2017/01/8e57cd862799-75x75.jpg" alt="«Золотий Фенікс*» ‬розправляє крила" width="75" height="75">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit repudiandae</span>
  </a>
</div>
<div class="wrapper">
  <a href="#">
    <img src="http://nslovo.com/wp-content/uploads/2017/01/8e57cd862799-75x75.jpg" alt="«Золотий Фенікс*» ‬розправляє крила" width="75" height="75">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit repudiandae</span>
  </a>
</div>
<div class="wrapper">
  <a href="#">
    <img src="http://nslovo.com/wp-content/uploads/2017/01/8e57cd862799-75x75.jpg" alt="«Золотий Фенікс*» ‬розправляє крила" width="75" height="75">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit repudiandae</span>
  </a>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrapper {
  display: inline-block;
}
 
a {
  cursor: pointer;
  text-decoration: none;
  color: #222; 
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  max-width: 250px;
  padding: 5px;
}
 
a span {
 margin-left: 10px;
}
Добавлено через 1 минуту
Можно даже без враппера и с инлайн флексом
1
16 / 16 / 11
Регистрация: 17.06.2016
Сообщений: 61
10.02.2017, 10:23 9
Здравствуете!
Могу вам порекомендовать, сначала создать общий див обертку (например wrapp) и поместить туда 4 дива (например div1-div4). Внутрь каждого дива разместить div для картинки и в него картинку и текст добавить в тег ( р ). Для дивов div1- div4 задать свойство display: table и width: 100%. Диву с картинкой задать например width: 30% и vertical-align: top. Тексту width: 60% и vertical-align: top. Попробуйте.
Успехов)
0
0 / 0 / 0
Регистрация: 18.11.2016
Сообщений: 116
10.02.2017, 10:34  [ТС] 10
так ты с картинкой сделал , а картинка не должна быть ссылкой
0
Модератор
Эксперт JSЭксперт HTML/CSS
3823 / 2673 / 1521
Регистрация: 12.07.2015
Сообщений: 6,674
Записей в блоге: 4
10.02.2017, 10:45 11
Fuzy, так сделайте без ссылки. Redzep дал вам рабочую идею для реализации задачи, а вы уже подстраивайте код под себя, в данном случае, надо всего лишь заменить ссылку div'ом.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
10.02.2017, 10:45
Помогаю со студенческими работами здесь

как задать отступ тексту
У меня такая проблема у меня два фона и на втором фоне я хочу сделать остступ на кол во пикселей...

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

Как тексту задать цвет, шрифт и размер?
Кто может поможет. Добавьте код, который бы изменял цвет и шрифт и размер текста. HWND hLabel;...

Как задать контролам автоматический размер по тексту?
С помощью этого кода создаются Option Button'ы: Public Sub CreateAnsw() Dim NCell As Integer,...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru