Плавае DIV ідзе ўніз, калі старонка змяняецца

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

  1. Left DIV мае фіксаваную шырыню
  2. Сярэдні дзіў змяняе памер акна з
  3. Right DIV мае фіксаваную шырыню

Усё выглядае добра, пакуль я змяніць памер акна і направа 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
дададзена
гэта працуе, але сярэдняя дзіў аленевую скура запоўніць астатнюю частку экрана, каб павялічыць рэзалюцыі будуць мець пустое прастору ў правай частцы іх экрана
дададзена аўтар Andre Escudero, крыніца

Я думаю, што праблема ў тым, што шырыня сярэдняй DIV 65% для ўсяго дакумента, а калі дакумент змяняецца сярэдні DIV атрымлівае rezised так, што яна перакрывае правую DIF, прымушаючы яго рухацца ўніз.

Я думаю, што гэта павінна працаваць для сярэдняга DIV:<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? западзіна думаць пра тое, што, на жаль, калі проста ставіць як сярэдні і правы DIV ніжэй першага = (
дададзена аўтар Andre Escudero, крыніца
Мне атрымоўваецца роду гэта выправіць, але Thers разрыў, калі экран з'яўляецца лепшым разрозненні. праверыць перагледжаны код у першым пасце
дададзена аўтар Andre Escudero, крыніца
Паспрабуйце адніманне трохі больш, скажам, 600 або так і, магчыма, нават змяніць 90% да 70%. Не ўпэўнены, што калі ён будзе працаваць, але калі вы важдацца са значэннямі трохі я не зе, чаму гэта should not праца :)
дададзена аўтар Mats Edvinsson, крыніца
і, дарэчы, калі мін-шырыня сярэдняга DIV складае 600, то вы павінны дадаць, што разам з шырынёй шырынёй 2 іншых div's, а таксама любога патэнцыйнага дапаўненні і гэтак далей, так, калі я думаю пра гэта я б ўсталяваць ЦЕЛА {мін-шырыня 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>

Што ваш сутнасці робіць тут спецыяльна не плавае сярэдні DIV (так што гэта поля слізгацення пад двух іншых - .., А затым запас з кожнага боку Такім чынам, вы павінны атрымаць максімальную гнуткасць Калі правая бок па-ранейшаму падае, вам, магчыма, спатрэбіцца змяніць парадак HTML, так што сярэдні дзіў прыходзіць пасля таго, як правы.

0
дададзена
гэта ставіць сярэдні і правы дзіў ніжэй адзін з адным і сярэдняга DIV мае белае прастору на вяршыні
дададзена аўтар Andre Escudero, крыніца

Загарніце усе 3 калонкі у 1 дзялення і ўсталяваць мін шырыню так, каб уся старонка звычай змяняць памер менш, чым гэта.

0
дададзена
Ive спрабаваў гэта, але правыя дзівы ўсё яшчэ ідзе ўніз = (
дададзена аўтар 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>

YAY !!! лол гэта нават працуе, калі змяненне памеру выглядае прыгожа !!

0
дададзена