Как изменить размер одного div, когда его соседний div будет изменен?

Я пытаюсь создать веб-сайт с флюидной сеткой, и теперь я сталкиваюсь с проблемой, которую просто невозможно исправить, просто используя css. Очевидно, я делаю что-то неправильно, но я просто не могу найти что.Как изменить размер одного div, когда его соседний div будет изменен?

Вот что: у меня есть один столбец (div: слева) и одно тело (div: справа), отображаемое в строке. на первом этапе div left имеет ширину 180, а div right растет до достижения 640px (например, youtube). На втором этапе я хочу, чтобы столбец вырасти еще больше от 120 пикселей до 150 px, но когда столбик растет, div right отбрасывается, хотя пространства достаточно. Я думаю, что это имеет какое-то отношение к технике маржи, которую я использовал, но я не могу найти ее, и не знаю никаких альтернатив, которые я мог бы использовать, поскольку я пытаюсь это сделать, не используя java.

Вот мой jsfiddle: который покажет проблему ясно: http://jsfiddle.net/tomvisser/WcbYL/embedded/result/

Я доволен всем помощью я могу получить.

Заранее спасибо.

<body> 
<div class="gridContainer clearfix"> 
    <div id="center"> 
    <div id="left">This is the content for Layout Div Tag "left"</div> 
    <div id="right">This is the content for Layout Div Tag "right"</div> 
    </div> 
</div> 
</body>

вот CSS:

#left { 
    float: left; 
    height:400px; 
    width: 150px; 
    display:inline; 
    background-color:#F00; 
} 

#right { 
    margin-left:150px; 
    background-color: #6F0 ; 
    height:400px; 
} 


@media only screen and (min-width: 650px) { 
.gridContainer {} 

#right { 
    margin-left:0px; 
    width:500px; 
    float:right; 
    display:inline; 
} 
#left { 
    margin-left:0px; 
    float: right; 
    width:100%; 
    margin-right:500px; 
}

источник

2013-03-19 Tom Visser

Я считаю, что ваше описание довольно запутанно>. <В любом случае, из того, что я понимаю до сих пор, вы хотите, чтобы зеленый div остался на том же уровне, что и красный div, вместо того, чтобы быть нажатым. Это правильно? – kyooriouskoala

Да, это край, отталкивающий его. Не уверен, что вы спрашиваете точно, но я, вероятно, могу поспорить, что вы хотите дать 2 divs max-width.

Таким образом, для шага 2 (?, То запрос СМИ), удалить поля и попытаться сделать что-то вроде:

max-width: 180px;

для левой колонки.

Это код, который я редактируется в вашем блоке запроса СМИ:

#right { 
    margin-left:0px; 
    width:500px; 
    float:right; 
    display:inline; 
} 
#left { 
    margin-left:0px; 
    float: right; 
    max-width:180px; 
}

Хотя у вас есть их плавающая прямо на цели?

источник

2013-03-19 06:18:17

Привет я попробовал ваш код и найти решение для Упование это поможет для you.Here я нахожусь предполагая, что общая ширина страницы 1024px.

HTML код

<div class="gridContainer clearfix"> 
    <div id="center"> 
    <div id="right">This is the content for Layout Div Tag "right"</div> 
    <div id="left">This is the content for Layout Div Tag "left"</div> 
    </div> 
</div>

CSS

<style type="text/css" > 
#left { 
    height:400px; 
    background-color:#F00; 
    width:512px; 
} 
#right { 
    background-color: #6F0 ; 
    height:400px; 
    float:right; 
    width:512px; 
} 
</style>

Здесь я даю ширину 512 пикселей для каждого DIV, потому что я предполагаю, что общая ширина страницы является 1024px.If вы хотите для увеличения ширины слева на 12 пикселей означает 512px + 12px = 524px , тогда вам нужно уменьшить 12px от ширины div справа, потому что ширина не может быть b e далее , тогда общая ширина страницы i.e 1024px. После уменьшения она станет 500px и снова 524px + 500px = 1024px. В этом случае ваш правый div не будет толкать. Надеюсь, вы поймете и будете работать на вас.

источник

2013-03-19 06:12:15 Rahul

Как изменить размер одного div, когда его соседний div будет изменен?

ответ

Смежные вопросы