Разместить форму слева, картинку справа

@kilometer · Регистрация: 02.08.2018

Студворк — интернет-сервис помощи студентам

Есть форма связи и картинка, нужно расположить их горизонтально. Картинка, если заключить все это дело в дивы, убегает под форму.

@AlexZaw · 09.08.2018, 17:58

Задайте для формы display:inline-block;

@kilometer · 10.08.2018, 06:37 **[ТС]**

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

@AlexZaw · 10.08.2018, 10:32

Код покажете или так и будем гадать?

@kilometer · 10.08.2018, 13:52 **[ТС]**

HTML5
1
2
[contact-form-7 id="125" title="Свяжитесь со мной" width=120px; display:inline-block;]
<div><img class="size-full wp-image-342 alignnone" src="http://domen/wp-content/uploads/2018/08/сайтостроение-260.png" alt="" width="260" height="393" /><img class="size-full wp-image-341 alignnone" src="http://domen/wp-content/uploads/2018/08/дизайн260.png" alt="" width="260" height="394" /></div>

@AlexZaw · 10.08.2018, 14:12

Как то так:

HTML5
1
2
3
4
5
6
<span style="color: black;">Или заполните форму ниже, чтобы мы могли связаться с Вами:</span>
<div>
<form>
  <input type="text">
</form>
<img class="size-full wp-image-342 alignnone" src="http://placekitten.com/g/200" alt="" width="260" height="393" /><img class="size-full wp-image-341 alignnone" src="http://placekitten.com/g/200" alt="" width="260" height="394" /></div>

CSS
1
2
3
form{
  display: inline-block;
}

form и div по умолчанию являются блочными элементами и даже если вы задаете им ширину, то после них все-равно будет сделан перенос на новую строку.

@kilometer · 10.08.2018, 14:39 **[ТС]**

а сама форма где? я ее шорткодом вставляла.

@6elka1703 · 10.08.2018, 14:41

kilometer,

Сообщение от AlexZaw

вот форма

@kilometer · 10.08.2018, 15:09 **[ТС]**

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

Добавлено через 1 минуту
в первом варианте * нет, во втором есть. как правильно?

Добавлено через 2 минуты
что-то близкое, но не совсем то. У формы пропали надписи над полями. И картинки сдвинулись на форму, в левый край.

Добавлено через 6 минут
почему-то добавление margin или padding в опции картинок, сдвигает не их, а подвальный фон....
Подскажите пожалуйста, как теперь эти картинки сдвинуть правильно?

Добавлено через 13 минут
Подвинула в браузерном редакторе, но картинки подвинулись, а форма пропала. Может она под картинкой, но тогда почему двигается форма тоже?

@6elka1703 · 10.08.2018, 15:24

kilometer, скрин покажите что получилось, и что вас не устраивает

@kilometer · 10.08.2018, 15:33 **[ТС]**

отредактировала margin 0px 0px 300px 0px; для картинки, она ушла вправо,захватив кусок формы

@kilometer · 10.08.2018, 15:34 **[ТС]**

расположить мне нужно слева направо - форму, потом 1 картинку, еще правее 2-ю картинку

@6elka1703 · 10.08.2018, 15:56

kilometer, так? https://codepen.io/nik-nikka/pen/qyQGqy

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <form action="">
  <input type="text">
  <input type="text">
  <input type="sumbit">
</form>
<div class="images">
  <img src="https://avatars.mds.yandex.net/get-pdb/245485/ef6703ea-fb3a-4bcb-ba88-dd23bb27d5f7/s1200" alt="">
<img src="https://avatars.mds.yandex.net/get-pdb/245485/ef6703ea-fb3a-4bcb-ba88-dd23bb27d5f7/s1200" alt="">
</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.container{
  display:flex;
}
 
form{
  margin-top: 10px;
}
 
input{
  margin-bottom: 50px;
  display: block;
}
 
.images{
  display: flex;
}
 
.images img{
  width: 300px;
  height: 200px;
  margin-left: 20px;
}

Комментарий модератора

Коды программ должны находиться на форуме! (Правила п.4.11)

@kilometer · 10.08.2018, 16:05 **[ТС]**

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

@6elka1703 · 10.08.2018, 16:06

kilometer, ну добавь для img и все

@kilometer · 10.08.2018, 16:11 **[ТС]**

а ничего, что у меня после img идет class а не src?

и как быть с формой, если я создам свою форму в редакторе форм Вордпресса, то там не только html код будет, еще шорткоды полей

@6elka1703 · 10.08.2018, 16:41

kilometer, с wordpress я не работал, так что помочь не могу. В img у тебя по любому должен быть атрибут src это путь к картинке.

@kilometer · 10.08.2018, 16:43 **[ТС]**

Спасибо за помощь!

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75

	Разместить форму слева, картинку справа 09.08.2018, 17:56. Показов 12059. Ответов 17 Метки нет (Все метки) Есть форма связи и картинка, нужно расположить их горизонтально. Картинка, если заключить все это дело в дивы, убегает под форму. 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	09.08.2018, 17:58
	Задайте для формы `display:inline-block;` 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	10.08.2018, 06:37 [ТС]
	Задала, ничего не изменилось. Пробовала и в дивах вместе с картинкой, и отдельно, и даже в таблицы прописывала - не получается.... 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	10.08.2018, 10:32
	Код покажете или так и будем гадать? 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	10.08.2018, 14:39 [ТС]
	а сама форма где? я ее шорткодом вставляла. 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	10.08.2018, 15:09 [ТС]
	не получилось, а что здесь убирает перенос строки блочных элементов? Добавлено через 1 минуту в первом варианте * нет, во втором есть. как правильно? Добавлено через 2 минуты что-то близкое, но не совсем то. У формы пропали надписи над полями. И картинки сдвинулись на форму, в левый край. Добавлено через 6 минут почему-то добавление margin или padding в опции картинок, сдвигает не их, а подвальный фон.... Подскажите пожалуйста, как теперь эти картинки сдвинуть правильно? Добавлено через 13 минут Подвинула в браузерном редакторе, но картинки подвинулись, а форма пропала. Может она под картинкой, но тогда почему двигается форма тоже? 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	10.08.2018, 15:24
	kilometer, скрин покажите что получилось, и что вас не устраивает 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	10.08.2018, 15:33 [ТС]
	отредактировала margin 0px 0px 300px 0px; для картинки, она ушла вправо,захватив кусок формы Миниатюры 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	10.08.2018, 15:34 [ТС]
	расположить мне нужно слева направо - форму, потом 1 картинку, еще правее 2-ю картинку 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	10.08.2018, 16:05 [ТС]
	Да, только еще отступы между картинками добавить. 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	10.08.2018, 16:06
	kilometer, ну добавь для img и все 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	10.08.2018, 16:11 [ТС]
	а ничего, что у меня после img идет class а не src? и как быть с формой, если я создам свою форму в редакторе форм Вордпресса, то там не только html код будет, еще шорткоды полей 0

@6elka1703 91 / 85 / 27 Регистрация: 29.10.2016 Сообщений: 928
	10.08.2018, 16:41
	kilometer, с wordpress я не работал, так что помочь не могу. В img у тебя по любому должен быть атрибут src это путь к картинке. 0

@kilometer 1 / 1 / 0 Регистрация: 02.08.2018 Сообщений: 75
	10.08.2018, 16:43 [ТС]
	Спасибо за помощь! 0