这是我的html和css代码:
<div id="navigation_header">
.....<br>
.....<br>
.....<br>
</div>
<div id="main_page">
**********
</div>
#navigation_header {
float:left;
}
#main_page {
float:left;
}
如您所见,main_page位于导航栏右侧。
但是,当我调整浏览器窗口大小时,随着宽度变小,main_page将显示在导航栏的底部。
当我更改窗口大小时,如何将主页固定在导航栏上。
PS:我为此创造了一个小提琴,检查它http://jsfiddle.net/E83dH/
答案 0 :(得分:2)
对于你想要的东西,你应该用DIV和带有最小宽度的样式包装两个元素:
.wrap { width:100%; min-width:300px;} // * min-width should be the combined width of both elements.
查看演示
答案 1 :(得分:1)
答案 2 :(得分:1)
如果您想根据屏幕宽度更改div的大小,则必须提供%width
。
这是css
#navigation_header {
float:left;
width:30%;
}
#main_page {
float:left;
width:70%;
}
你可以在这里查看[jsfiddle] http://jsfiddle.net/E83dH/1/
答案 3 :(得分:1)
我建议你做的是把两件东西放在一个容器里,给容器一个min width
。事实上,你的所有div都是min-width
HTML
<div class='container'>
<div id="navigation_header">.....
<br>.....
<br>.....
<br>
</div>
<div id="main_page">**********</div>
</div>
CSS
#navigation_header {
float:left;
}
#main_page {
float:left;
}
.container {
min-width:300px;
}
这将确保您在底部获得滚动条,但第二个div不会低于此值。请注意,min-width
应该是第二个元素低于第一个元素时两个元素的总宽度。