0

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

Структура такова,

.right-block {
  display: block;
  position: relative;
  height: 200px;
  width: 400px;
  float: right;
}

.left-block {
  display: block;
  padding-top: 100px;
  position: relative;
  width: 400px;
  height: 67px;
}

.header {
  display: block;
  position: relative;
  top: 20px;
  text-align: center;
}
<div class="voucher-body">
  <div class="head">
    <span class="header">Service Request</span>
  </div>
  <div class="left-block">
    <span class="new-line">	
    				<span class="field-label">Group Name:</span>
    <span class="thumbnail"> 56pax Motor Coach</span>
    </span>
    <span class="new-line">
    				<span class="field-label">Leave Date:</span>
    <span class="thumbnail">12/15/2017</span>
    </span>
    <span class="new-line">
    				<span class="field-label">Leave Time:</span>
    <span class="thumbnail">5:00 pm</span>
    <span class="new-line">
    				<br>
    				<span class="field-label">Pickup Details:</span>
    <span class="thumbnail">
    					New Comers H.S 
    					28-01 41st. Ave. 
    					Long Island City. NY 11101</span>
    </span>
  </div>
  <div class="right-block">
    <span class="new-line">
    				<span class="thumbnail" id="main">Wednesday, December 13,2017</span>
    <span class="field-label"></span>
    </span>
    <span class="new-line">
    				<span class="field-label">Charter No:</span>
    <span class="thumbnail">9230</span>
    </span>
    <span class="new-line">
    				<span class="field-label">Dispatch ID:</span>
    <span class="thumbnail">3293</span>
    </span>
    <br>
    <span class="new-line">
    				<span class="field-label">Phone:</span>
    <span class="thumbnail"></span>
    </span>
    <span class="new-line">
    				<span class="field-label">Fax:</span>
    <span class="thumbnail"></span>
    </span>
    <br>
    <span class="new-line">
    				<span class="field-label">Return Date:</span>
    <span class="thumbnail">12/15/2017</span>
    </span>
    <span class="new-line">
    				<span class="field-label">Drop Time:</span>
    <span class="thumbnail">10:00 pm</span>
    </span>
    <span id="new-line">
    				<span class="field-label"># Vehicles</span>
    <span class="thumbnail">1</span>
    <span class="field-label">Unit Type</span>
    <span class="thumbnail">56-Bus</span>
    </span>
    <span class="new-line">
    				<span class="field-label">Termination</span>
    <span class="thumbnail">
    					Drop off in DC
    					RTN @ 5pm to LIC
    				</span>
    </span>
    <span class="new-line">
    				<span class="field-label">Point:</span>
    </span>
  </div>

Как мне прописать, чтоб блок right и left были на одном уровне?

А то структура получается таковой, что под header идёт left, а под left right, а надо чтоб сбоку было

2 ответа 2

1

Можно через флексбокс

.voucher-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.head {
    flex-basis: 100%;
    margin-bottom: 100px;
}
.right-block{
    float: none;
    padding-top: 0;
}
1

Попробуйте поставить

.left-block{
      float:left;
           }

И убрать padding-top.

Ваш ответ

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

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