I am trying to accomplish this:
我想完成这个:
But I am having trouble getting the two middle divs to play nice. If I set them both to a relative number (30% and 70%) it "works" but the left div changes size as the user changes the browser-windows width.
但是我很难让两个中间的div玩得很好。如果我将它们都设置为相对数字(30%和70%),它“工作”但左侧div会随着用户更改浏览器窗口宽度而改变大小。
#floatitleft{width:30%; float:left;}
#floatitright{width:70%; float:left;}
What I want is, as the picture illustrates
我想要的是,如图所示
#floatitleft{width:300px; float:left;}
#floatitright{width:100%; float:left;}
But this causes "floatitright" to end up beneath floatitleft. And if I set it to 70% it does end up to the right of "floatitleft" but as I change the browser size a little it ends up underneath yet again. What to do?
但这会导致“floatitright”最终落在floatitleft之下。如果我将它设置为70%它最终会到达“floatitleft”的权利,但是当我稍微更改浏览器大小时,它会再次在下面结束。该怎么办?
UPDATE: Eventually I ended up with:
更新:最终我最终得到:
#topper{
height:100px;
width:100%;
background-color:blue;
}
#wrapperz{
height:inherit;
width:100%;
}
#wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;}
#wrapperz #floatitleft{
width:300px;
float:left;
}
#wrapperz #floatitright{
margin-left: 300px;
min-width:300px;
}
#bottommer{
height:100px;
width:100%;
background-color:red;
}
Which would be used as:
哪个用作:
<div id="topper">
test
</div>
<div id="wrapperz">
<div id="floatitleft">
<p> Stuff </p>
</div>
<div id="floatitright">
<p> Stuff </p>
</div>
<div style="clear: both;"/>
</div> <!-- Close Wrapper -->
<div id="bottommer">
test
</div>
Note that this isn't proper HTML but it just serves as the solution to my example. Also, the "div style="clear: both" is escpecially important if you try this because not using that cuases the footer to mess up as the wrapper doesn't properly stretch vertically. But Mark has provided a what I believe to be better/cleaner alternative below.
请注意,这不是正确的HTML,但它只是作为我的示例的解决方案。此外,“div style =”清晰:“如果你尝试这个是非常重要的,因为没有使用那个因为包装物不能垂直伸展而使得页脚陷入困境。但Mark提供了我认为更好的东西/清洁剂替代下面。
3 个解决方案
#1
14
Wouldn't this work as intended?
这不会按预期工作吗?
#floatitleft{
width:300px;
float:left;
}
#floatitright{
margin-left: 300px;
}
#2
3
Here, I made a duplicate of your picture: jsbin.com/ipexep/3 (click "edit in jsbin" at the top-right to view and edit the source)
在这里,我复制了你的图片:jsbin.com/ipexep/3(点击右上角的“在jsbin中编辑”查看和编辑源代码)
I for the height of the top and bottom sections, I took the height for them that you put in the picture.
我对于顶部和底部的高度,我把它们放在图片中的高度。
Note: I did it by making every section absolutely positioned and setting their top, bottom, left, or right attributes accordingly.
注意:我是通过使每个部分绝对定位并相应地设置其顶部,底部,左侧或右侧属性来实现的。
Also, notice that my method will match every screen size. I have streched it in every area you didn't specify a dimension. (except the header and footer needed a height dimension so I guessed since you didn't specify)
另外,请注意我的方法将匹配每个屏幕大小。我已经在你没有指定维度的每个区域中拉伸它。 (除了页眉和页脚需要一个高度尺寸,所以我猜你没有指定)
#3
1
You can accomplish that very easy using grid system.
您可以使用网格系统轻松完成。
Take a look, you can choose a 12 or 16 , 24 or even more columns. You just use classes like "grid_4", "grid_8" depending on the width you need.
看一下,您可以选择12或16,24甚至更多列。您只需使用“grid_4”,“grid_8”等类,具体取决于您需要的宽度。
#1
14
Wouldn't this work as intended?
这不会按预期工作吗?
#floatitleft{
width:300px;
float:left;
}
#floatitright{
margin-left: 300px;
}
#2
3
Here, I made a duplicate of your picture: jsbin.com/ipexep/3 (click "edit in jsbin" at the top-right to view and edit the source)
在这里,我复制了你的图片:jsbin.com/ipexep/3(点击右上角的“在jsbin中编辑”查看和编辑源代码)
I for the height of the top and bottom sections, I took the height for them that you put in the picture.
我对于顶部和底部的高度,我把它们放在图片中的高度。
Note: I did it by making every section absolutely positioned and setting their top, bottom, left, or right attributes accordingly.
注意:我是通过使每个部分绝对定位并相应地设置其顶部,底部,左侧或右侧属性来实现的。
Also, notice that my method will match every screen size. I have streched it in every area you didn't specify a dimension. (except the header and footer needed a height dimension so I guessed since you didn't specify)
另外,请注意我的方法将匹配每个屏幕大小。我已经在你没有指定维度的每个区域中拉伸它。 (除了页眉和页脚需要一个高度尺寸,所以我猜你没有指定)
#3
1
You can accomplish that very easy using grid system.
您可以使用网格系统轻松完成。
Take a look, you can choose a 12 or 16 , 24 or even more columns. You just use classes like "grid_4", "grid_8" depending on the width you need.
看一下,您可以选择12或16,24甚至更多列。您只需使用“grid_4”,“grid_8”等类,具体取决于您需要的宽度。