Плавающее вертикальное выравнивание и т.е 7 выпуск - PullRequest
Новая
       18

Плавающее вертикальное выравнивание и т.е 7 выпуск

0 голосов
/ 16 ноября 2011

Мои плавающие дивы работали как шарм, пока я не заметил небольшую ошибку в вертикальном выравнивании в двух верхних самых плавающих дивах.

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

Моя диаграмма ASCII проблемы: 

div1|annoyinggap
    |div2
    | 
____|____    
div3 div4
    |
    |
    |
____|____

Также в IE 7 DIVS просто отображаются в одномстолбец, а не красивая сетка 2 x 2?

Смежный вопрос: сетка 2 x 2 div с использованием float с минимальной высотой

HTML / CSS: 

<div class="boxContainerTop">
<div class="boxContainer">
  <div class="Section2R2CCol"></div>  
  <div class="Section2R2CCol"></div>  
  <div class="Section2R2CCol"></div>  
  <div class="Section2R2CCol"></div> 
</div>  
</div>

.boxContainerTop {
    float: left;
}

.boxContainer {
    border: 1px solid #BBC614;
    float: left;
    height: auto;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 2px;
    width: 950px;
}

.Section2R2CCol:after {
    clear: both;
    content: ".";
    display: block;
    float: left;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.Section2R2CCol {
    display: inline-block;
    height: auto;
    min-height: 125px;
    padding-top: 5px;
    width: 470px;
}

На дополнительном примечании, прежде чем кто-то упомянул об этом: Да, мы можем поспорить, кому небезразлична история IE 7, мой ответ достаточен для посетителей сайта, т.е. 7, чтобы оправдать сохранение разработки.Любая новая функциональность создается для ie8 / ie9.

По запросу: http://jsfiddle.net/yBMdc/ jsfiddle test case.CSS действительно извиняется за этот CSS был обновлен здесь.

Ответы [ 4 ]

1 голос
/ 16 ноября 2011

Мои плавающие div'ы работали как шарм, пока я не заметил небольшую ошибку в выравнивании вертикали в двух верхних наиболее плавающих div.

Добавьте vertical-align: top к .Section2R2CCol.

Также в т. Е. 7 делений просто показывают в одном столбце, а не в красивой сетке 2 x 2?

Изменить display: inline-block на: 

display: inline-block;
*display: inline;
zoom: 1;

См .: http://jsfiddle.net/thirtydot/yBMdc/1/

0 голосов
/ 16 ноября 2011

Просто изменить, 

.Section2R2CCol {
    display: inline-block;
    *float: left;
    height: auto;
    min-height: 125px;
    padding-top: 5px;
    width: 470px;
}

http://jsfiddle.net/yBMdc/3/

0 голосов
/ 16 ноября 2011

Убедитесь, что вы используете DOCTYPE. 

<!DOCTYPE html>
0 голосов
/ 16 ноября 2011

Вы не можете использовать display: inline-block для элементов блока в ie6-7. Он будет работать только со встроенными элементами. Вы, вероятно, должны просто плавать их, используя float: left.

...