Помогите сделать блоки div в ряд

Azazello77

Полезный
Регистрация
16 Май 2015
Сообщения
213
Реакции
16
Есть страница Для просмотра ссылки Войди или Зарегистрируйся
нужно привести её к виду, как на миниатюре

при использовании

product-info .options {
  1. display: inline;
  2. margin-bottom: 10px;
  3. overflow: hidden;
ничего не происходит

(правый столбец с ценой пока не важен)
 

Вложения

  • Ach1Sb_umGY.jpg
    Ach1Sb_umGY.jpg
    103,8 KB · Просмотры: 24
Так у вас в div'ах класс "option", а в css - "options".
 
Код:
.option {
float: left;
}
.clear {
clear: both;
}

После элемента, где нужен перенос ставите
Код:
<div class="clear"></div>
 
еще желательно указать width
 
Есть страница Для просмотра ссылки Войди или Зарегистрируйся
нужно привести её к виду, как на миниатюре

при использовании

product-info .options {
  1. display: inline;
  2. margin-bottom: 10px;
  3. overflow: hidden;
ничего не происходит

(правый столбец с ценой пока не важен)
.options .option { display:block; float:left; margin-right: 10px; margin-bottom: 10px; }
 
Зачем float'ы ?
Нужно изменить разметку малость. Чтобы сделать как на картинке.
Блок .price надо вложить внутрь .options
Ну и тд. Разметку сначала нормально сделайте, а потом уже за стили.

  1. display: inline;
  2. margin-bottom: 10px;
  3. overflow: hidden;
ничего не происходит
Конечно не происходит, margin со строчными элементами не работает.
 
Уберите display:inline;
 
Как-то так, позиционирование точно будет как на картинке, а там уже мелочи поправить по отступам и прочее.

HTML:
<div class="clearfix">   
   <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>Тип визы:</b></div><br>
          <input type="text" value="">
   </div>
   <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>Требуемая ЗП:</b></div><br>
          <input type="text" value="">
   </div>
   <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>Возраст:</b></div><br>
          <input type="text" value="">
   </div>
   <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>Город:</b></div><br>
          <select>
             <option>Пункт 1</option>
             <option>Пункт 2</option>
          </select>
   </div>
</div>
<div class="clearfix">
   <div class="col-50">    
      <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>История работы в Корее:</b></div><br>
          <textarea></textarea>
       </div>
   </div>
   <div class="col-50">    
      <div class="option">
          <div class="nameopt"><span class="required">*</span>
          <b>Опыт работы:</b></div><br>
          <textarea></textarea>
       </div>
   </div>
</div>

HTML:
.option { 
   min-width: 185px;
   margin-right: 20px;
   display: inline-block;
   vertical-align: top;
   position: relative;
}
.col-50 {
   float: left;
   width: 50%;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
 
display:inline-block;
width: 200px;
float: left;

Должно получиться
 
Назад
Сверху