Как выровнять форму подачи заявки?

244

13 октября 2017, 14:51

Есть форма и текст которую надо разместить как на картинке. Никак не могу выровнять как надо. На сколько я понял input-и и textarea надо обернуть в отдельные блоки и их потом размещать? Помогите пожалуйста.

.application{ 
	display: flex; 
	padding-top: 39px; 
	padding-left: 51px; 
	width: 195px; 
	height: 210px; 
} 
.application_txt span{ 
	display: inline-block; 
} 
.application_txt #title{ 
	text-transform: uppercase; 
	font-size: 48px; 
	font-weight: bold; 
 
} 
.callback{ 
	clear:both;  
	float: right; 
} 
#message{ 
	width: 315px; 
	height: 180px; 
	resize: none; 
	border-color: #0cb1aa; 
} 
.callback input[type="text"]{ 
	width: 310px; 
	height: 40px; 
	border-color: #0cb1aa; 
} 
.fields { 
	clear:both;  
	text-align: left; 
}

<div class="application"> 
  <div class="application_txt"> 
    <span id="title">Подать заявку</span> 
    <span id="txt">Заполните форму, чтобы записаться на консультацию – это первый шаг к зачислению в школу. Количество мест ограничено</span> 
  </div> 
<!-- Форма заявки --> 
<section class="callback"> 
  <form action="" id="callback"> 
    <div class="fields"> 
      <label >Имя<br> 
        <input type="text"></label> 
      <label >Телефон<br> 
        <input type="text"></label> 
      <label >E-mail<br> 
        <input type="text"></label> 
      </div> 
      <div class="mess"> 
        <label>Сообщение<br> 
          <textarea name="" id="message" cols="30" rows="10"></textarea> 
        </label> 
      </div> 
    <button class="send" type="submit">Подать заявку</button> 
  </form> 
</section> 
</div>

Answer 1

Например вот так:

*, 
*:before, 
*:after { 
  box-sizing: border-box; 
} 
 
.application { 
  padding-top: 39px; 
  padding-left: 51px; 
  width: 900px; 
  position: relative 
} 
 
.application:before, 
.application:after { 
  content: ''; 
  display: table; 
} 
 
.application:after { 
  clear: both; 
} 
 
.application_txt { 
  float: left; 
  width: 33%; 
} 
 
.col { 
  float: left; 
  width: 50%; 
  padding: 0 10px; 
} 
 
.application_txt span { 
  display: inline-block; 
} 
 
.application_txt #title { 
  text-transform: uppercase; 
  font-size: 48px; 
  font-weight: bold; 
} 
 
.callback { 
  float: right; 
  width: 66%; 
  position: relative 
} 
 
.callback:before, 
.callback:after { 
  content: ''; 
  display: table; 
} 
 
.callback:after { 
  clear: both; 
} 
 
#message { 
  width: 100%; 
  height: 180px; 
  resize: none; 
  border-color: #0cb1aa; 
} 
 
.callback input[type="text"] { 
  width: 100%; 
  height: 40px; 
  border-color: #0cb1aa; 
} 
 
.fields { 
  text-align: left; 
} 
 
.mess { 
  text-align: right; 
}

<div class="application"> 
  <div class="application_txt"> 
    <span id="title">Подать заявку</span> 
    <span id="txt">Заполните форму, чтобы записаться на консультацию – это первый шаг к зачислению в школу. Количество мест ограничено</span> 
  </div> 
  <!-- Форма заявки --> 
  <section class="callback"> 
    <form action="" id="callback"> 
      <div class="fields"> 
        <div class=col> 
          <label>Имя<br> 
        <input type="text"></label> 
          <label>Телефон<br> 
        <input type="text"></label> 
          <label>E-mail<br> 
        <input type="text"></label> 
        </div> 
      </div> 
 
      <div class=col> 
        <div class="mess"> 
          <label>Сообщение<br> 
          <textarea name="" id="message" cols="30" rows="10"></textarea> 
        </label> 
          <button class="send" type="submit">Подать заявку</button> 
        </div> 
 
      </div> 
    </form> 
  </section> 
</div>

Answer 2

Можете воспользоваться flex версткой - разделить на блоки (у вас их 3) и поместить их в отдельный контейнер. А у него уже прописать необходимые атрибуты. Пример ниже.

.application{ 
	display: flex; 
	padding-top: 39px; 
	padding-left: 51px; 
	width: 195px; 
	height: 210px; 
} 
.application_txt span{ 
	display: inline-block; 
} 
.application_txt #title{ 
	text-transform: uppercase; 
	font-size: 48px; 
	font-weight: bold; 
 
} 
.callback{ 
	clear:both;  
	float: right; 
} 
#message{ 
	width: 315px; 
	height: 180px; 
	resize: none; 
	border-color: #0cb1aa; 
} 
.callback input[type="text"]{ 
	width: 310px; 
	height: 40px; 
	border-color: #0cb1aa; 
} 
.fields { 
	clear:both;  
	text-align: left; 
} 
.fields{ 
  display: flex; 
  justify-content center; 
  align-items: flex-start; 
} 
.column{ 
  flex: 1 1 33%; 
  padding: 0 10px; 
}

<div class="application"> 
 
<!-- Форма заявки --> 
<section class="callback"> 
  <form action="" id="callback">   
    <div class="fields"> 
      <div class="column"> 
        <div class="application_txt"> 
          <span id="title">Подать заявку</span> 
          <span id="txt">Заполните форму, чтобы записаться на консультацию – это первый шаг к зачислению в школу. Количество мест ограничено</span> 
        </div> 
      </div> 
      <div class="column"> 
        <label >Имя<br> 
          <input type="text"></label> 
        <label >Телефон<br> 
          <input type="text"></label> 
        <label >E-mail<br> 
          <input type="text"></label> 
      </div> 
      <div class="column"> 
        <div class="mess"> 
          <label>Сообщение<br> 
            <textarea name="" id="message" cols="30" rows="10"></textarea> 
          </label> 
        </div> 
        <button class="send" type="submit">Подать заявку</button> 
      </div> 
    </div> 
  </form> 
</section> 
</div>

Answer 3

Можно воспользоваться флекс-боксами

.application{ 
	display: flex; 
	padding-top: 39px; 
	padding-left: 51px; 
	width: 195px; 
	height: 210px; 
} 
.application_txt span{ 
	display: inline-block; 
} 
.application_txt #title{ 
	text-transform: uppercase; 
	font-size: 48px; 
	font-weight: bold; 
 
} 
.callback{ 
	clear:both;  
	float: right; 
} 
.callback form { 
  display:flex; 
} 
#message{ 
	width: 315px; 
	height: 180px; 
	resize: none; 
  float:right; 
	border-color: #0cb1aa; 
} 
.callback input[type="text"]{ 
	width: 310px; 
	height: 40px; 
	border-color: #0cb1aa; 
} 
.fields { 
	clear:both;  
	text-align: left; 
}

<div class="application"> 
  <div class="application_txt"> 
    <span id="title">Подать заявку</span> 
    <span id="txt">Заполните форму, чтобы записаться на консультацию – это первый шаг к зачислению в школу. Количество мест ограничено</span> 
  </div> 
<!-- Форма заявки --> 
<section class="callback"> 
  <form action="" id="callback"> 
    <div class="fields"> 
      <label >Имя<br> 
        <input type="text"></label> 
      <label >Телефон<br> 
        <input type="text"></label> 
      <label >E-mail<br> 
        <input type="text"></label> 
      </div> 
      <div class="mess"> 
        <label>Сообщение<br> 
          <textarea name="" id="message" cols="30" rows="10"></textarea> 
        </label> 
            <button class="send" type="submit">Подать заявку</button> 
 
      </div> 
  </form> 
</section> 
</div>