Бет өлшемі өзгергенде, өзгермелі бөлік төмендейді

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

  1. Сол жақ div ені тіркелген
  2. Терезенің орташа бөлімі
  3. терезесімен өлшенеді
  4. Оң жақ бөлікте тіркелген ені бар

Терезе өлшемін өзгертіп, RIGHT div төменгі div

enter image description here

enter image description here

және мұнда кейбір код үзінділері бар

<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

Осыған сәйкес басқаруға болатын, бірақ div және div кодтарының арасындағы айырмашылық бар және оны div Төменге түсіріңіз. Орташа өлшемді 63% -дан жоғары өлшемге дейін өзгерте алмаймын

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 жауаптар

DivContainer үшін максималды енін пиксельде беріңіз.

мысалы.

max-width: 710px;

Немесе максималды енді 53% -ға дейін төмендетуге болады.

2
қосылды
бұл жұмыс істейді, бірақ орта DIV экранның қалған бөлігін толтырмайды, сондықтан үлкен ажыратымдылықтарда экранның оң жағында бос орын болады
қосылды автор Andre Escudero, көзі

Менің ойымша, мәселе ортақ дивизионның 65% ені бүкіл құжат үшін және құжат өлшемі өзгерген кезде, орта дивизион әртүрлі дифференциалды қиып өтіп, оны төмендетуге мәжбүрлейтін етіп қайтадан алынады.

Менің ойымша, бұл орташа дивизионда жұмыс істеу керек:<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
қосылды
% o.o-дан шегеру бұл, өкінішке орай, ортаңғы және оң жақ дивиздерді алғашқы бірінен төмен = (
қосылды автор Andre Escudero, көзі
Мен оны түзетуді шеше аламын, бірақ экранды үлкен ажыратымдылықтар болған кезде бос орын қалдырады. бірінші жазбада жаңартылған кодты тексеріңіз
қосылды автор Andre Escudero, көзі
Шағын шығарып көріңіз, 600 дейік, тіпті 90% -дан 70% -ға дейін өзгеруі мүмкін. Сенімді емес пе, егер ол жұмыс істейді, бірақ егер сіз құндылықтармен айналысатын болсаңыз, мен неге жұмыс істемеймін?
қосылды автор Mats Edvinsson, көзі
Айтпақшы, ортаңғы бөліктің ені 600 болса, онда сіз ені 2 дивтің ені ені мен сонымен бірге кез-келген әлеуетті толтырғышпен бірге қосып, сонымен қатар, мен ойлаған кезде, BODY {min-width: 1200}
қосылды автор Mats Edvinsson, көзі
Егер бұл сіздің мәселеңізді шешсе, осы лауазымға жауап ретінде қойыңыз. :)
қосылды автор Mats Edvinsson, көзі

Орташа div үшін ең үлкен ені + пайызын орнату қателікке бейім.

Орташа үшін осындай нәрсені сынау туралы не деуге болады?

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

Мұнда сіз шын мәнінде бұл жерде жұмыс жасайтын болсаңыз, ол орта дивиздерді өзгертпейді (бұл екі шет жағы шетіне қарай жылжиды), содан кейін әр жағынан беткі жағы.Егер икемділікке ие болсаңыз, оң жағы әлі де түсіп кетсе, қажет болуы мүмкін HTML дивизионын өзгерту үшін орта дивизион дұрыс болғаннан кейін келеді.

0
қосылды
бұл орта және оң бөліктерді бір-бірінен төмендетеді, ал орта бөлікте үстіңгі кең орын бар
қосылды автор Andre Escudero, көзі

Барлық 1 бағандағы 3 бағанды ​​ораңыз және бүкіл ені осыдан кішірек өлшемге ие болатындай мин енін орнатыңыз.

0
қосылды
Мен бұл тырысты, бірақ дұрыс divs төмендейді = (
қосылды автор Andre Escudero, көзі

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>

АЛАҚАЙ!!! lol тіпті өлшемді өлшемі жақсы көрінген кезде жұмыс істейді !!

0
қосылды