html css二[英] html css two

问题描述

这里有一个新的 html 学习器.请帮忙.
我写了一个两栏的网页.它们的宽度都是固定的.
左边是菜单,右边主要是内容
展示.我粘贴了几行如下:

#leftcolumn{
背景颜色:白色;
清除:左;
宽度:176px;
左边距:3px;
右边距:3px;
浮动:左;
上边距:3px;
}

#rightcolumn{
背景色:透明;
宽度:560px;
浮动:左;
溢出:自动;
左边框:1px 实心#C3C3C3;
padding-left: 10px;
padding-right: 10px;
上边距:6px;
padding-bottom: 1em;
}

浏览器的窗口足够宽时,网页是正确的;
当窗口很窄时,它的行为不正确.也就是说
右栏自动刷新到左栏下方.

可以指定什么属性来锁定右列?

非常感谢,

推荐答案

我对此也很陌生,但也许你可以把这两列都放进去
另一个<div''box'',左右列都有足够的宽度,
560 + 176 像素.(我不确定,但您可能需要添加
边距也.)

值得一试,直到一些更有经验的人做出他们的
建议.

祝你好运.
"千瓦"<bi**@village.org 在留言中写道
新闻:f3**********@mailhub227.itcs.purdue.edu...
>这里有一个新的 html 学习器.请帮忙.
我写了一个两栏的网页.它们的宽度都是固定的.
左边是菜单,右边主要是内容
展示.我粘贴了几行如下:

#leftcolumn{
背景颜色:白色;
清除:左;
宽度:176px;
左边距:3px;
右边距:3px;
浮动:左;
上边距:3px;
}

#rightcolumn{
背景色:透明;
宽度:560px;
浮动:左;
溢出:自动;
左边框:1px 实心#C3C3C3;
padding-left: 10px;
padding-right: 10px;
上边距:6px;
padding-bottom: 1em;
}

当浏览器的窗口足够宽时,网页是正确的;
当窗口很窄时,它的行为不正确.也就是说
右栏自动刷新到左栏下方.

可以指定什么属性来锁定右列?

非常感谢,



kw 写道:
一个新的 html 学习者在这里.请帮忙.
我写了一个两栏的网页.它们的宽度都是固定的.
你*是*新人.
左边是菜单,右边主要是内容
展示.我粘贴了几行如下:

#leftcolumn{
背景颜色:白色;
清除:左;
宽度:176px;
左边距:3px;
右边距:3px;
浮动:左;
上边距:3px;
}

#rightcolumn{
背景色:透明;
宽度:560px;
浮动:左;
溢出:自动;
左边框:1px 实心#C3C3C3;
padding-left: 10px;
padding-right: 10px;
上边距:6px;
padding-bottom: 1em;
}

当浏览器的窗口足够宽时,网页是正确的;
当窗口很窄时,它的行为不正确.也就是说
右栏自动冲到左栏下方.
不,这也是正确的.你已经让它们漂浮了,你已经给了它们
基于像素的宽度,因此浏览器按顺序执行.没问题.

我想说,真正的问题是固定宽度的想法.你是
要求所有访问者的浏览器视口为 182 + 580 = 762px.
任何更宽的东西,用户在
的右侧有空的、浪费的空间他们的视口.再窄一点,他们就会看到你在抱怨什么
关于,虽然你真正想要的是他们得到一个水平的
滚动条.最好避免水平滚动.

所以我想说,真正的答案是使用百分比宽度,或者一些
设计更灵活.

但另一个想法是去除浮动,并添加大约的左边距
182px 到右侧元素.那会把它推到左边元素的右边,
它会伸出 UA 右侧的空间.

但是,以像素为单位设置宽度相当棘手,我建议您
避免它(除非,比如说,你正在单独处理图像,为此
像素是自然单位).如果是左边的导航和右边的文本内容
你有,考虑 ems 或者,就像我说的,% 宽度(你必须付费
注意百分比是百分比,但你会工作的
出).

我可以建议您将#leftcolumn 重命名为语义上的名称
上下文相关的,例如 #nav 和 #rightcolumn 到 #content?
>
可以指定什么属性来锁定右列?
如果你想"锁定",就不要"浮动".

--
约翰

kw 写道:
一个新的 html 学习者在这里.请帮忙.
我写了一个两栏的网页.它们的宽度都是固定的.
左边是菜单,右边主要是内容
展示.我粘贴了几行如下:

#leftcolumn{
背景颜色:白色;
清除:左;
宽度:176px;
左边距:3px;
右边距:3px;
浮动:左;
上边距:3px;
}

#rightcolumn{
背景色:透明;
宽度:560px;
浮动:左;
溢出:自动;
左边框:1px 实心#C3C3C3;
padding-left: 10px;
padding-right: 10px;
上边距:6px;
padding-bottom: 1em;
}

当浏览器的窗口足够宽时,网页是正确的;
当窗口很窄时,它的行为不正确.也就是说
右栏自动刷新到左栏下方.

可以指定什么属性来锁定右列?
将两个 div 包含在一个固定宽度的包装器中.另外,浮动#rightcolumn
div 右,而不是左.这将在两者之间创建一个自然的排水沟
列提供的两个嵌套 div 的宽度低于
包装器的宽度.

本文地址:https://www.itbaoku.cn/post/1050522.html