如何调整一个div的大小，当其邻近的div完成调整大小？

我想做一个流体网格网站，现在我正面临一个问题，只是不能修复只是使用CSS。显然我做错了什么，但我只是找不到。如何调整一个div的大小，当其邻近的div完成调整大小？

这是事情：我有一列（div：左）和一个正文（div：右）在线显示。在第一个div左边的宽度为180，div右边正在增长，直到达到640px（如youtube）。在第二阶段，我想让列增长一些，从120px增加到150px，但是当列增长的时候，div右移被推下，即使有足够的空间。我认为这与保证金的技术有关，但我无法找到它，并且不知道我可以使用的任何替代方法，因为我试图在不使用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 2013-03-19 02:38:08

是的，这是利润率的下降。不知道你在问什么，但我可以打赌你打算给2个div的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.Hope的解决方案将帮助you.Here我是假设一个页面的总宽度1,024像素。

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像素每格，因为我假设页面的总宽度是1024px.If你想将左边的宽度增加12像素意味着512px + 12px = 524px 那么你需要减小div右边宽度的12px，因为宽度不能是b e更多然后页面的总宽度例如1024px.After减少后将变为500px，再次 524px + 500px = 1024px。在这种情况下，您的右分区不会下推。希望你明白，并会为你工作。

来源

2013-03-19 06:12:15 Rahul

如何调整一个div的大小，当其邻近的div完成调整大小？

回答

相关问题