1

我正在尝试制作一个流体网格网站，现在我面临一个似乎无法仅使用 css 解决的问题。显然我做错了什么，但我找不到什么。

事情是这样的：我有一列（div：left）和一个body（div：right）内嵌显示。在第一阶段，左边的 div 宽度为 180，右边的 div 正在增长，直到达到 640 像素（如 youtube）。在第二阶段，我想让列从 120 像素增长到 150 像素，但是当列增长时，即使有足够的空间，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; 
}
4

2 回答 2

0

嗨，我尝试了您的代码并为您找到了解决方案。希望它对您有所帮助。这里我假设页面的总宽度为 1024 像素。

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，因为宽度不能大于页面的总宽度，即 1024 像素。减小后它将变为 500 像素，再次变为 524 像素 + 500 像素 = 1024 像素。在这种情况下，您的右 div 不会向下推。希望您能理解并为您工作。

于 2013-03-19T06:12:15.190 回答
0

是的，这是把它压低的边距。不知道你到底在问什么，但我可以打赌你想给 2 divmax-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-19T06:18:17.020 回答