我正在尝试制作一个流畅的网格网站，现在我面临一个似乎无法仅使用 css 解决的问题。显然我做错了什么，但我就是找不到什么。
事情是这样的:我有一个列(div:左)和一个主体(div:右)在线显示。在第一个 div left 的宽度为 180，div right 不断增长直到达到 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;
}
最佳答案
是的，是边际将它推低了。不确定您到底在问什么，但我可以打赌您希望为 2 个 div 提供 max-width 属性。
因此，对于第 2 步(媒体查询？)，删除边距并尝试执行以下操作:
最大宽度:180px;
对于左列。
这是我在您的媒体查询 block 中编辑的代码:
#right {
margin-left:0px;
width:500px;
float:right;
display:inline;
}
#left {
margin-left:0px;
float: right;
max-width:180px;
}
虽然你是故意让它们漂浮的？
关于css - 如何在其相邻的 div 完成调整大小时调整一个 div 的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15490257/