Sahifa o'lchamlari o'zgartirilganda floating div pastga tushadi

Ok, so I have a 3 column floating divs. All are set float:left

  1. Chap div kengaytiriladigan kenglikga ega
  2. Markaziy div oyna bilan qayta o'lchamoqda
  3. To'g'ri divning aniqligi kengligi

Everything looks fine 'til I resize the window and the RIGHT div goes down below the middle div

enter image description here

enter image description here

va bu erda ba'zi kod zarralari

<div class="divContainer" style="width:300px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:600px;max-width: 65%">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="width:265px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

.divContent{    
    margin : 16px 10px 5px;
}

.divContainer {
    float: left;
    margin: 0px 20px 20px 0px;
    padding-bottom: 10px;   
    background-color:#FFFFFF;
    border: 1px solid #CCC;
    box-shadow:4px 4px 13px #bbbbbb;
    -moz-box-shadow:4px 4px 13px #bbbbbb;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

EDIT

Buni amalga oshirish uchun boshqariladigan, lekin div va div o'rtasida to'g'ri bo'sh joy bor va buni div pastga tushing. O'rtacha 63% dan yuqori va shunga o'xshash juda g'alati ...

body min-width = 1560px
<div class="divContainer" style="width:300px;">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:900px;width: 63%;">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

<div class="divContainer" style="min-width:100px;max-width: 15%;float: right">
    <div class="divContent">
{RIGHT DIV CONTENT HERE}
    </div>
</div>

enter image description here

4

5 javoblar

DivContainer uchun maksimal kengligi pikselga aylantiring.

Misol uchun.

max-width: 710px;

Yoki maksimal kenglikni 53% ga qisqartirishingiz mumkin.

2
qo'shib qo'ydi
bu ishlaydi, lekin o'rta DIV ekranning qolgan qismini to'ldirmaydi, shuning uchun katta ekranlar ekranning o'ng qismida bo'sh joyga ega bo'ladi
qo'shib qo'ydi muallif Andre Escudero, manba

Muammo shundaki, o'rta divning 65% kengligi butun hujjat uchun va hujjatning o'lchamlari o'rta bo'lgach, o'ng tomonning turli xilligi bilan farqlanadi va uni pastga tushirishga majbur qiladi.

Bu o'rta div uchun ishlash kerak, deb o'ylayman:<div class="divContainer" style="min-width:600px;max-width: 90% - 565px">

I havn´t tried it out myself but i think that should work and if not, just try to lower the precentage from 90% to something smaller.

EDIT:
If you want to be able to make the window shorter than 565px wide you can try and set:

BODY {min-width:600px; }

2
qo'shib qo'ydi
% o.o dan chiqariladimi? Afsuski, faqat ikkala o'rta va o'ng divni birinchi ostidan pastga qo'yadigan bo'lsa, = (
qo'shib qo'ydi muallif Andre Escudero, manba
Men uni tuzatishni tartibga solaman, lekin displeyning kattaroq o'lchamlari bo'lsa, bo'shliqni o'zgartiraman. birinchi lavozimda qayta ko'rib chiqilgan kodni tekshiring
qo'shib qo'ydi muallif Andre Escudero, manba
Biroz ko'proq narsani kamaytirishga harakat qiling, 600 yoki shunga o'xshash va hatto 90% dan 70% gacha o'zgarishi mumkin. Ishlamasligimdan qat'i nazar, agar u ishlamasa, lekin qadriyatlarga botib qolsangiz, nima uchun u ishlamasligi kerak?
qo'shib qo'ydi muallif Mats Edvinsson, manba
va, agar siz o'rta divning minimalligi 600 bo'lsa, siz yana 2 div kengligining kengligi bilan birga, har qanday potensial bo'shliqni va shunga o'xshash narsalarni qo'shib qo'yishingiz kerak, shuning uchun men buni BODY {min-width: 1200}
qo'shib qo'ydi muallif Mats Edvinsson, manba
Agar muammoingizni hal qilsangiz, iltimos, bu xabarni javob sifatida belgilang. :)
qo'shib qo'ydi muallif Mats Edvinsson, manba

O'rta div uchun minimal kenglik + foizini o'rnatish ozgina xato.

Qanday qilib bu kabi o'rta narsa uchun harakat qilish kerak?

<div class="divContainer" style="float: none; margin-left: 300px; margin-right: 300px">
    <div class="divContent">
{CENTER DIV CONTENT HERE}
    </div>
</div>

Bu erda siz asosan bu erda ishlaydigan narsa o'rta divni almashtirmaydilar (shunda marjlar boshqa ikkala ostiga o'tadi) va keyin har tomonni chetga surib qo'ying.Yana moslashuvchanlikni oshirish kerak, o'ng tomon hali ham tushib qolsa, HTMLni tartibini almashtirish uchun, o'rta div o'ngdan so'ng keladi.

0
qo'shib qo'ydi
Bu o'rta va o'ng divni bir-birining ostiga qo'yadi va o'rta div yuqorida oq bo'sh joyga ega
qo'shib qo'ydi muallif Andre Escudero, manba

Barcha 3 ustunni 1 div ga joylashtiring va butun sahifani bundan kattaroq o'lchamasligi uchun minimal kenglikni o'rnating.

0
qo'shib qo'ydi
Men buni sinab ko'rdim, lekin to'g'ri divlar hali ham pastga tushadi = (
qo'shib qo'ydi muallif Andre Escudero, manba

SOLVED!!! I floated the first div to the left, the second one the to the right and the middle last no floats just margins based on right and left div width + padding+ margins

enter image description here

<div class="divContainer" style="width:300px;float: left;">
    <div class="divContent">[LEFT DIV StUFF HERE]</div>
</div>

<div class="divContainer" style="width: 250px;float: right;">
    <div class="divContent">[RIGHT DIV STUFF HERE]</div>
</div>

<div class="divWidget" id="clientStatusDiv" style="margin:0px 270px 0 310px;">
    <div class="divContent">[CENTER STUFF HERE]</div>
</div>

VAJJAJ!!! lol hatto kattalashtirishda ham yaxshi ko'rinadi ishlaydi!

0
qo'shib qo'ydi