Question

我正在努力建立一个流畅的网格网站，现在我正面临着一个问题，似乎只能使用css来修复。显然我做错了，但我找不到。

这就是事情：我有一列（div：left）和一个体（div：right）在线显示。在第一阶段div左边的宽度为180，div右边正在增长，直到达到640px（就像youtube一样）。在第二阶段，我想让色谱柱从120px增加到150 px，但是当色谱柱正在增长时，即使有足够的空间，右侧也会被推下。我认为这与我一直在使用的保证金技术有关，但我无法找到它，并且不知道我可以使用的任何替代方案，因为我试图在不使用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; 
}

Answer 1

您好我尝试了您的代码并为您找到了解决方案。希望它对您有所帮助。我就是这样假设页面的总宽度为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>

这里我给每个div的宽度为512px，因为我假设页面的总宽度是1024px。如果你想将左边的宽度增加12 px意味着512px + 12px = 524px 然后你需要从div右宽度减少12px因为宽度不能更多页面的总宽度，即1024px。减少后，它将再次变为500px 524px + 500px = 1024px。在这种情况下，你的右边div不会下推。希望您理解并为您服务。

Answer 2

是的，它的利润率下降了。不确定你究竟在问什么，但我可能打赌你希望给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;
}

虽然你是否故意让他们漂浮？

如何在调整邻近div的大小时调整一个div的大小？

2 个答案: