html css两个 [英] html css two
问题描述
新的HTML学习者在这里。请帮忙。
我写了一个两栏的网页。它们的宽度都是固定的。
左边是菜单，右边是主要内容
显示。我粘贴了几行如下：
#leftcolumn {
background-color：white;
clear：left;
宽度：176px;
margin-left：3px;
margin-right：3px;
float：离开;
margin-top：3px;
}
#rightcolumn {
background-颜色：透明;
宽度：560px;
浮动：左;
溢出：自动;
border- left：1px solid＃C3C3C3;
padding-left：10px;
padding-right：10px;
margin-top：6px;
padding-bottom：1em;
}
当浏览器的窗口足够宽时，网页是正确的;
当窗口很窄时，它的行为不正确。也就是说
右列自动刷新到左栏下面。
可以指定什么属性来锁定右栏？
非常感谢，
我也是新手，但也许你可以放两个列进入
另一个< div''box''，左右列都有足够的宽度，
560 + 176 px。 （我不确定，但你可能还需要增加
边距的宽度。）
值得一试直到一些经验丰富的人提出他们的建议。
祝你好运。
" kw" < bi ** @ village.orgWrote in message
news：f3 ********** @ mailhub227.itcs.purdue.edu ...
>新的HTML学习者在这里。请帮忙。
我写了一个两栏的网页。它们的宽度都是固定的。
左边是菜单，右边是主要内容
显示。我粘贴了几行如下：
#leftcolumn {
background-color：white;
clear：left;
宽度：176px;
margin-left：3px;
margin-right：3px;
float：离开;
margin-top：3px;
}
#rightcolumn {
background-颜色：透明;
宽度：560px;
浮动：左;
溢出：自动;
border- left：1px solid＃C3C3C3;
padding-left：10px;
padding-right：10px;
margin-top：6px;
padding-bottom：1em;
}
当浏览器的窗口足够宽时，网页是正确的;
当窗口很窄时，它的行为不正确。也就是说
右列自动刷新到左栏下面。
可以指定什么属性来锁定右栏？
非常感谢，
kw写道：
一个新的HTML学习者就在这里。请帮忙。
我写了一个两栏的网页。它们的宽度都是固定的。
你*是*新的。
左边是菜单，右边是主菜单内容
显示。我粘贴了几行如下：
#leftcolumn {
background-color：white;
clear：left;
宽度：176px;
margin-left：3px;
margin-right：3px;
float：离开;
margin-top：3px;
}
#rightcolumn {
background-颜色：透明;
宽度：560px;
浮动：左;
溢出：自动;
border- left：1px solid＃C3C3C3;
padding-left：10px;
padding-right：10px;
margin-top：6px;
padding-bottom：1em;
}
当浏览器的窗口足够宽时，网页是正确的;
当窗口很窄时，它的行为不正确。也就是说
右列会自动刷新到左列下方。
不，这也是正确的。你已经让它们漂浮了，并且你给了它们
像素为基础的宽度，所以浏览器符合订购要求。没问题。
我想说的是，固定宽度的想法是真正的问题。你是
要求所有访问者拥有182 + 580 = 762px的浏览器视口。
任何更宽的东西，并且用户有空的，浪费的空间在右边
他们的视口。任何较窄的，他们都会看到你抱怨的是什么，但是你真正想要的是他们得到一个横向的
滚动条。最好避免水平滚动。
所以真正的答案，就是使用百分比宽度，或者一些更灵活的设计
。 br />
但另一个想法是删除浮点数，并向右边元素添加约$
182px的左边距。那将把它推到左边的元素，
它会伸到UA右侧的空间。
设置宽度（以像素为单位）相当，我推荐你
避免它（除非，比如说，你单独使用图像，为此
像素是自然的单位）。如果它是向左导航并且文本内容正确，那么你可以考虑使用ems，或者，正如我所说，％宽度（你需要支付
注意力）什么百分比是百分比，但你会工作
out）。
我建议你将#leftcolumn重命名为某种语义
上下文，比如#nav，＃rightcolumn就像#content一样？
>
什么可以指定属性来锁定右列吗？
如果你想锁定，不要浮动。
-
John
kw写道：
一个新的HTML学习者在这里。请帮忙。
我写了一个两栏的网页。它们的宽度都是固定的。
左边是菜单，右边是主要内容
显示。我粘贴了几行如下：
#leftcolumn {
background-color：white;
clear：left;
宽度：176px;
margin-left：3px;
margin-right：3px;
float：离开;
margin-top：3px;
}
#rightcolumn {
background-颜色：透明;
宽度：560px;
浮动：左;
溢出：自动;
border- left：1px solid＃C3C3C3;
padding-left：10px;
padding-right：10px;
margin-top：6px;
padding-bottom：1em;
}
当浏览器的窗口足够宽时，网页是正确的;
当窗口很窄时，它的行为不正确。也就是说
右列自动刷新到左栏下面。
可以指定什么属性来锁定右列？
将两个div包含在固定宽度的包装器中。另外，将#rightcolumn
div浮动，而不是离开。这将在两个
列之间创建一个自然的阴沟，前提是两个嵌套div的宽度低于包装器的
宽度。
A new html learner is here. Please help.
I write a two column web page. Their widths are both fixed.
The left one is a menu and the right one is mainly for content
display. I pasted a few lines as the following:
#leftcolumn{
background-color: white;
clear: left;
width: 176px;
margin-left: 3px;
margin-right: 3px;
float: left;
margin-top: 3px;
}
#rightcolumn{
background-color: transparent;
width: 560px;
float: left;
overflow: auto;
border-left: 1px solid #C3C3C3;
padding-left: 10px;
padding-right: 10px;
margin-top: 6px;
padding-bottom: 1em;
}
The web page is correct when the browser''s window is wide enough;
it behaves incorrectly when the window is narrow. That is say the
right column automatically flushes to underneath the left column.
What property can be specified to lock the right column?
Thank you very much,
I''m pretty new at this, too, but perhaps you could put both column into
another <div''box'' with adequate width for both the left and right column,
560 + 176 px. (I''m not sure, but you might have to add in the width of the
margins also.)
It''s worth a try until some of the more experienced folks make their
suggestions.
good luck.
"kw" <bi**@village.orgwrote in message
news:f3**********@mailhub227.itcs.purdue.edu...>A new html learner is here. Please help.
I write a two column web page. Their widths are both fixed.
The left one is a menu and the right one is mainly for content
display. I pasted a few lines as the following:
#leftcolumn{
background-color: white;
clear: left;
width: 176px;
margin-left: 3px;
margin-right: 3px;
float: left;
margin-top: 3px;
}
#rightcolumn{
background-color: transparent;
width: 560px;
float: left;
overflow: auto;
border-left: 1px solid #C3C3C3;
padding-left: 10px;
padding-right: 10px;
margin-top: 6px;
padding-bottom: 1em;
}
The web page is correct when the browser''s window is wide enough;
it behaves incorrectly when the window is narrow. That is say the
right column automatically flushes to underneath the left column.
What property can be specified to lock the right column?
Thank you very much,
kw wrote:A new html learner is here. Please help.
I write a two column web page. Their widths are both fixed.You *are* new.
The left one is a menu and the right one is mainly for content
display. I pasted a few lines as the following:
#leftcolumn{
background-color: white;
clear: left;
width: 176px;
margin-left: 3px;
margin-right: 3px;
float: left;
margin-top: 3px;
}
#rightcolumn{
background-color: transparent;
width: 560px;
float: left;
overflow: auto;
border-left: 1px solid #C3C3C3;
padding-left: 10px;
padding-right: 10px;
margin-top: 6px;
padding-bottom: 1em;
}
The web page is correct when the browser''s window is wide enough;
it behaves incorrectly when the window is narrow. That is say the
right column automatically flushes to underneath the left column.No, that''s correct, too. You''ve made them floats, and you''ve given them
pixel-based widths, so the browser complies as ordered. No problem there.
The real problem, I would say, is the idea of fixed widths. You''re
requiring all visitors to have a browser viewport of 182 + 580 = 762px.
Anything wider, and the user has empty, wasted space to the right of
their viewport. Any narrower, and they see what you''re complaining
about, although what you really want is that they get a horizontal
scrollbar. Horizontal scrolling is best avoided.
So the real answer, I would say, is to use percentage widths, or some
design which is more flexible.
But another idea is to remove the floats, and add a left margin of about
182px to the right element. That''ll push it right of the left element,
and it''ll stick out into space on the right side of the UA.
Setting widths in pixels is rather icky, though, and I recommend you
avoid it (unless, say, you''re working with images alone, for which
pixels are natural units). If it''s nav left and text content right that
you''ve got, consider ems or, as I said, % widths (you have to pay
attention to what the percentages are percentages of, but you''ll work it
out).
May I suggest you rename your #leftcolumn to something semantically
contextual, such as #nav, and #rightcolumn to something like #content?
>
What property can be specified to lock the right column?If you want to "lock", don''t "float".
--
John
kw wrote:A new html learner is here. Please help.
I write a two column web page. Their widths are both fixed.
The left one is a menu and the right one is mainly for content
display. I pasted a few lines as the following:
#leftcolumn{
background-color: white;
clear: left;
width: 176px;
margin-left: 3px;
margin-right: 3px;
float: left;
margin-top: 3px;
}
#rightcolumn{
background-color: transparent;
width: 560px;
float: left;
overflow: auto;
border-left: 1px solid #C3C3C3;
padding-left: 10px;
padding-right: 10px;
margin-top: 6px;
padding-bottom: 1em;
}
The web page is correct when the browser''s window is wide enough;
it behaves incorrectly when the window is narrow. That is say the
right column automatically flushes to underneath the left column.
What property can be specified to lock the right column?Enclose both divs in a fixed-width wrapper. Also, float the #rightcolumn
div right, not left. This will create a natural gutter between the two
columns provided the widths of the two nested divs fall short of the
width of the wrapper.
这篇关于html css两个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
