Два DIV встроенных ячеек таблицы вызывают вертикальное смещение в одном из них - PullRequest
Новая
       4

Два DIV встроенных ячеек таблицы вызывают вертикальное смещение в одном из них

2 голосов
/ 06 января 2012

Я искал это, но я не могу найти похожий случай, на который был дан ответ.Извините, если к нему уже обращались.

У меня есть раздел html-страницы, который выглядит на базовом уровне примерно так: 

<div id=wrap>
    <div id=lb>
         Content
    </div>
    <div id=rb>
        Content
    </div>
</div>

Они в основном разбивают мое тело налевая секция (LB) и правая секция (RB).С соответствующим CSS (не показывает сброс CSS, но также используется универсальный; ... указывает, что присутствует другой код, но нет данных): 

#bwrap {
 width: 100%;
 height: 400px;
 display:inline-table;
 ...
}
#lb {
 width: 71.5%;
 display: table-cell;
 ...
}
#rb {
  width: 28.5%;
  display: table-cell;
  padding: 30px 6px 7px 6px;
  border-left: 1px #6A6A6A solid;
  border-right: 1px #6A6A6A solid;
 }

Я начал справа налево и заполнилпо содержанию в #RB;все было идеально.Однако, как только я начал работать в #LB, я заметил, что весь мой контент в #RB сместился вниз, чтобы выровняться с нижней частью содержимого # LB.Несмотря на то, что ни содержимое, ни DIV не совпадают.Конкретный контент, который сделал это, был календарем Google, встроенным в #LB.Все выглядит совершенно нормально, кроме сдвига вниз в # RB.

Кто-нибудь знает, где я ошибся?Я пытался связываться с поплавками и абсолютным позиционированием, но ни один из них не имел никакого эффекта, большинство из них фактически ухудшило ситуацию.

Ответы [ 4 ]

1 голос
/ 29 июня 2012

Используйте это 

vertical-align: top;

Живой пример http://jsfiddle.net/wfyVy/

0 голосов
/ 06 января 2012

Когда вы используете отступы в элементах с значениями ширины%, отступы увеличивают значение ширины.Попробуйте немного уменьшить ширину, чтобы получить правильную пропорцию.

0 голосов
/ 06 января 2012

Не используйте display: table-cell, это некрасиво и не работает согласованно во всех браузерах. Вы должны быть в состоянии справиться с плавающей точкой и шириной.

Также используя отступы или поля натот же элемент, что и элемент с определенной шириной, не очень хорошая идея, опять же несовместимость браузера делает работу с ним кошмаром.

Я предлагаю вам сделать что-то вроде: 

<div id="wrap">
   <div id="lb">
       content
   </div>
   <div id="rb">
      <div id="rp">
           more content
      </div>
   </div>
</div>

сcss: 

#wrap {
 width: 100%;
 height: 400px;
 display: block;
 ...
}
#lb {
 width: 71.5%;
 display: inline; //not actually necessary
 float: left;
 ...
}
#rb {
  width: 28.5%;
  display: inline; //again not necessary
  float: right;
 }
 #rp{
  border-left: 1px #6A6A6A solid;
  border-right: 1px #6A6A6A solid;
  padding: 30px 6px 7px 6px;
 }
0 голосов
/ 06 января 2012

Он прыгает вниз, потому что дополнительные отступы и границы, которые вы определили для rb, увеличивают общую ширину контейнера, делая его больше не 28,5%.Попробуйте это: 

#lb {
 width: 70%;
 display: table-cell;
 ...
}
#rb {
  width: 20%;
  display: table-cell;
  padding: 30px 6px 7px 6px;
  border-left: 1px #6A6A6A solid;
  border-right: 1px #6A6A6A solid;
  oveflow:hidden;
 }

Обновление: если недостаточно изменить его на вышеприведенный css, попробуйте добавить float: left для обоих идентификаторов выше.

...