1

Всем привет столкнулся с такой проблемой как добиться такого результата как на стриншоте?

введите сюда описание изображения

Итак, сайт на котором хочу разместить, создан на wordpress. Форма на adobe muse.

Как мне добиться такого вида: слева - картинка, справа - форма, вся форма по центру страницы!

Форма отправки сообщения находится на этой странице, может пригодиться кому-то

Вот что прописываю на странице:

<div class="blockotpravka">

<img class="imgotpravka" src="http://1.santehniki.pp.ua/wp-content/uploads/2017/02/stiralka-k-kanalizacii-1-1024x768.jpg" width="481" height="361">
<div class="otpravka">

[caldera_form id="CF58d1926c3410b"]

</div>
</div>

В стилях прописываю так, чтобы по центру было два блока

.blockotpravka {
widht: 100 %;
} 

.imgotpravka {
display: block;
margin: auto;
}

.otpravka { 
widht: 400px; 
margin: 0 auto; 
float:left;
}

1 ответ 1

0

float необходимо применить к картинке (к первому элементу)

.imgotpravka {
    ...
    float: left;
}

а margin: 0 auto; соответственно к общему блоку .blockotpravka

.blockotpravka {
  width: 800px;
  margin:auto;
}

.imgotpravka {
  width: 400px;
  float: left;
}

.otpravka {
  width: 400px;
}
<div class="blockotpravka">

  <img class="imgotpravka" src="http://1.santehniki.pp.ua/wp-content/uploads/2017/02/stiralka-k-kanalizacii-1-1024x768.jpg" width="481" height="361">

  <div class="otpravka">[caldera_form id="CF58d1926c3410b"]</div>

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.