Чому ці DIV не будуть правильно вирівнюватися?

У мене є 3 DIV, які знаходяться в межах "містить" DIV. Контейнер шириною 960px і 3 DIV мають ширину 45%, 10% і 45%. І всі вони "плавали вліво". Досить простий?

Well for some reason the 3 DIVs won't align correctly, i.e. next to each other. The middle DIV is always above the DIV on the right. What am I doing wrong? Here's a fiddle to illustrate what I mean: http://jsfiddle.net/m2Zzw/2/

HTML:

<div id="mTopContainer"> 
    <div class="mTopInner clearfix">
        <div class="leftBlock floatLeft">
            
[Customer], we have found 126 results for you, which are based on a mortgage of £50,000 over a period of 17 years.


The mortgage will be secured against a property with a value of £100,000, meaning that you will be borrowing 50% of the property's purchase price.


We used your answers to find the lenders more likely to accept you and the rates they are likely to offer you – the rates and lenders may therefore differ from those featured on our homepage. The actual rates offered to you may differ from that shown.

</div> <div class="middleBlock floatLeft"> </div> <div class="rightBlock floatLeft">
Your next step
            
Get advice from one of our expert mortgage partners, Sensible Financial Solutions – FTB Prime and take the hassle out of finding the right mortgage for your needs.
Any advice provided is not given either by or on behalf of [company]. </div> </div> </div>

CSS:

#mTopContainer { width:100%; height:250px;  border:1px solid #BDD7EF;  margin-top:15px;  } 
/*.mTopInner  { height:250px; background: url('/Images/Mortgages/restoplady.png') top right no-repeat;   }   */
.leftBlock { width:45%; }
.middleBlock { width:10%; border-right:1px solid #BDD7EF; margin:0 auto; }
.rightBlock { width:45%; }

.clearfix:before, .clearfix:after { content: " "; display: table;  }  
.clearfix:after { clear: both; }  
/* For IE 6/7 only */  
.clearfix { *zoom: 1; }
.floatLeft { float:left; }
1
Спасибі, хлопці, я не розумію, що це додає ширині:/Виправити зараз. Дякую!
додано Автор zik, джерело
Ваша проблема - це кордон. Ви маєте 45% + 10% + 45% + межу , яке 100% + border , тому три елементи не вписуються в один рядок .
додано Автор t.niese, джерело
Ваша проблема - це кордон. Ви маєте 45% + 10% + 45% + межу , яке 100% + border , тому три елементи не вписуються в один рядок .
додано Автор t.niese, джерело
На середньому елементі div існує border
додано Автор Nick R, джерело

9 Відповіді

звикли до цього

.middleBlock{ box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}

тому що ви використовуєте межу і використовується для ширини

than your width is width + border == > Total width of your div

box-sizing is css3 properties

Демо

2
додано
Прекрасне спасибі! Просто прочитав про це на блозі Paul Irish ... просто спробував це і він спрацював.
додано Автор zik, джерело

звикли до цього

.middleBlock{ box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}

тому що ви використовуєте межу і використовується для ширини

than your width is width + border == > Total width of your div

box-sizing is css3 properties

Демо

2
додано
Прекрасне спасибі! Просто прочитав про це на блозі Paul Irish ... просто спробував це і він спрацював.
додано Автор zik, джерело

Коли ви використовуєте точний відсоток, щоб відповідати 100%, всі властивості CSS, які працюють з маржею або додаванням, будуть важливими. У вашому коді ви додаєте властивість border-right з розміром 1px, тоді ваш DIV буде 10% + 1px, щоб не було достатньо місця для вашого права DIV, і воно йде під середнім.

Рішення: використовуйте середній div як контейнер і додайте кордон-право в інший DIV всередині.

1
додано

І якщо ви хочете сумісності зі старими браузерами, просто видаліть кордон на середньому div. Потім ви можете зламати його назад, використовуючи піксельне фонове зображення, розташуйте його праворуч і встановіть його повтор на осі Y.

Просто ідея.

0
додано
Дякуємо, намагаючись уникнути хакі і ми підтримуємо IE8> так що прийнята відповідь повинна бути нормальною
додано Автор zik, джерело
Ха-ха Я знаю, що ви маєте на увазі. Ганьба, що нам все одно потрібно використовувати хаки. Кривавий Microsoft!
додано Автор zik, джерело
Я, мабуть, зловживав терміном 'hack' тут, але впевнений, якщо CSS3 працює для вас, йдіть!
додано Автор Shomz, джерело

І якщо ви хочете сумісності зі старими браузерами, просто видаліть кордон на середньому div. Потім ви можете зламати його назад, використовуючи піксельне фонове зображення, розташуйте його праворуч і встановіть його повтор на осі Y.

Просто ідея.

0
додано
Дякуємо, намагаючись уникнути хакі і ми підтримуємо IE8> так що прийнята відповідь повинна бути нормальною
додано Автор zik, джерело
Ха-ха Я знаю, що ви маєте на увазі. Ганьба, що нам все одно потрібно використовувати хаки. Кривавий Microsoft!
додано Автор zik, джерело
Я, мабуть, зловживав терміном 'hack' тут, але впевнений, якщо CSS3 працює для вас, йдіть!
додано Автор Shomz, джерело

Because 45% + 10% + 45% + 1px border > 100%

Ви повинні додати

.middleBlock{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

у вашому листі

0
додано

Because 45% + 10% + 45% + 1px border > 100%

Ви повинні додати

.middleBlock{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

у вашому листі

0
додано

З певним запасом ви повинні це виправити Зліва: ...%; Верхня межа: ....%

Якщо ви спробуєте що, де ..., ви повинні поставити значення.

0
додано

З певним запасом ви повинні це виправити Зліва: ...%; Верхня межа: ....%

Якщо ви спробуєте що, де ..., ви повинні поставити значення.

0
додано