0

Есть

<div id="a"></div>
<div id="b"></div>

Для того чтобы разместить блок В рядом с блоком А (справа от блока А), нужен такой код:

#a{
positson: relative;
top:0px:left:0px;
widht:100px; height:200px;
}

#b{
positson: relative;
top:-200px:left:100px;
widht:100px; height:200px;
}

Но если блок А не имеет фиксированную высоту (в нем будет много или мало текста), то как отпозиционировать блок В?

Если делать блок А absolute, то контент, который в нем содержится, выступает и заступет вниз (ниже нижних элементов страницы). Размещение блока В в блоке А ничего хорошего не дает.

Вот такая проблема БЕЗ конкретики. Я выделил, то что не знаю не понимаю.


Дописываю:

Хотя, кажется, можно эти два дива поместить в один див. И сделать (назначить свойство) этому диву justify-content: flex-start;. Не знаю, нужно проверить. Проверю отпишусь.

1 ответ 1

0
  1. У Вас грубейшие ошибки в css!

    правильно:

         #a{
           position: relative;
           top:0px;
           left:0px;
           width:100px; 
         }
    
       #b{
           position: relative;
           top:-200px:
           left:100px;
           width:100px; 
           height:200px;
         }
    
  2. Для того чтобы разместить блок В рядом с блоком А (справа от блока А), нужен такой код:

    Тут без комментарий вообще (возвращаемся к пункту 1.).

  3. Задать, чтобы блок В был рядом с блоком А можно несколькими способами:

    • inline-block

       #a, #b {
         display: inline-block;
         vertical-align: top;
       }
      
    • float: left

      #a, #b {
         float: left;
      }
      
    • другие (flex, table, ...)

Например:

#a{
  position: relative;
  top:0px;
  left:0px;
  width: 100px; 
}

#b{
  position: relative;
  top:-200px:
  left:100px;
  width:100px; 
  height:200px;
}

#a, #b {
  float: left;
}



/* Стили для наглядности */
#a {
  background: #ccc;
}

#b {
  background: #777;
}
<div id="a">
  контент без фикс. высоты
</div>
<div id="b"></div>

без контента:

#a{
  position: relative;
  top:0px;
  left:0px;
  width: 100px; 
  
  min-height: 1px;
}

#b{
  position: relative;
  top:-200px:
  left:100px;
  width:100px; 
  height:200px;
}

#a, #b {
  float: left;
}



/* Стили для наглядности */
#b {
  background: #777;
}
<div id="a">
  
</div>
<div id="b"></div>

Вариант с оберткой .wrap:

.wrap {
  position: relative;
  display: flex;
}

#a{
  width: 100px; 
}

#b{
  width:100px; 
  height:200px;
}


/* Стили для наглядности */
#a {
  background: #ccc;
}
#b {
  background: #777;
}
<div class="wrap">
  <div id="a">
  
</div>
<div id="b"></div>
</div>

6
  • Детально еще не разобрался. По поводу ошибок: с точки зрения css--парсера какая разница как написан код: в одну строку или во многих строках. Спорить не буду. Вы более сведущи в этих делах.
    – Aliskin
    7 окт 2016 в 16:21
  • Проблема не в строках, а в написании НЕ positson, а position; НЕ widht, а width!
    – SVE
    7 окт 2016 в 16:35
  • А строки конечно же не при чем, можно свойства и в одну строку писать, главное разделять их ;
    – SVE
    7 окт 2016 в 16:37
  • ааа, так я это писал прям тут на сайте, а не в IDE. в среде достаточно набрать пару первых букв. дальше автодополнение работает. Вот наверное потому у меня только по полслова правильно написано.
    – Aliskin
    7 окт 2016 в 16:40
  • Тогда понятно =)
    – SVE
    7 окт 2016 в 16:42

Ваш ответ

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

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