使用div与表数据进行不同的渲染 [英] Different rendering with div versus table data
问题描述
我正在试图弄清楚如何在html 4严格页面上显示
一个侧边栏时使用div来避免表格。我已经遇到了这样的情况：我在主div中获得了不同的
元素渲染，具体取决于它是否是
包含在< td>内或者< div> -
http：// www。 chem.utoronto.ca/~dstone/test1.html
http://www.chem.utoronto.ca/~dstone/test2.html
我一直在努力理解为什么，特别是，< ul>
和< dl>在< div>中，项目没有按照我预期的方式缩进
元件。如果有人可以用简单的英语解释为什么这个
是这样的（没有运气好的
html 4规格！）我将不胜感激。表版本
呈现了我希望这样做的方式，当在Firefox或Safari中查看
时。
我已经想出了如何使用CSS移动东西，但
我也想知道是否有更优雅的解决方案，
基于我错过了关于
div元素的一些重要概念？
I''m trying to figure out how to avoid tables when presenting
a sidebar on an html 4 strict page, by using div instead. I''ve
run into a situation where I get different rendering of the
elements within the main div, depending on whether it is
contained within a <td> or a <div> -
http://www.chem.utoronto.ca/~dstone/test1.html
http://www.chem.utoronto.ca/~dstone/test2.html
I''ve been trying to understand why, particularly, the <ul>
and <dl> items are not indented the way I would have expected
when in the <div> element. If someone could explain why this
is so in plain English (not having had much luck with the
html 4 spec!) I would appreciate it. The table version
renders the way I would have expected both to do so, when
viewed in Firefox or Safari.
I''ve figured out how to move things around using CSS, but
I''d also like to know if there''s a more elegant solution,
based on my having missed some important concept regarding
div elements?
推荐答案
为了进一步培养人类，David Stone< no******@domain.invalid>
vouchsafed：
To further the education of mankind, David Stone <no******@domain.invalid>
vouchsafed:
我正在试图弄清楚如何在展示时避免使用表格在html 4严格页面上的侧边栏，而不是使用div。我已经遇到了这样一种情况：我在主div中获得了不同的
元素渲染，这取决于它是否包含在< td>中。或者< div> -
http：// www。 chem.utoronto.ca/~dstone/test1.html
http://www.chem.utoronto.ca/~dstone/test2.html
我一直试图理解为什么，尤其是< ul>
和< dl>在< div>中，项目没有按照我预期的方式缩进
元件。如果有人可以用简单的英语解释为什么这个
（没有运气好的
html 4规格！）我会很感激。在Firefox或Safari中查看
时，表版本
呈现了我希望这样做的方式。
我已经想出了如何使用CSS，但是
我也想知道是否有一个更优雅的解决方案，
基于我错过了一些关于
div元素的重要概念？
I''m trying to figure out how to avoid tables when presenting
a sidebar on an html 4 strict page, by using div instead. I''ve
run into a situation where I get different rendering of the
elements within the main div, depending on whether it is
contained within a <td> or a <div> -
http://www.chem.utoronto.ca/~dstone/test1.html
http://www.chem.utoronto.ca/~dstone/test2.html
I''ve been trying to understand why, particularly, the <ul>
and <dl> items are not indented the way I would have expected
when in the <div> element. If someone could explain why this
is so in plain English (not having had much luck with the
html 4 spec!) I would appreciate it. The table version
renders the way I would have expected both to do so, when
viewed in Firefox or Safari.
I''ve figured out how to move things around using CSS, but
I''d also like to know if there''s a more elegant solution,
based on my having missed some important concept regarding
div elements?
在案例2中，你需要在li'上添加一个保证金，例如：
li {margin-left：2em; }
为什么？我自己的感觉是，这是< ul>中的一个缺陷。没有
的元素尊重< div>的边界当靠近浮子时。甚至
设置" position：relative;"在div上没有帮助，如果你接近
< ul>，你会看到它一直延伸到整个页面。有趣的是
难题。
-
Neredbojias
Infinity有其限制。
In case 2, you need to add a margin on the li''s, like:
li { margin-left:2em; }
Why? My own feeling is that it''s a flaw in the <ul> element which does not
respect the boundaries of the <div> when adjacent to the float. Even
setting "position:relative;" on the div didn''t help, and if you border the
<ul>, you see it stretches all the way across the page. Interesting
conundrum, though.
--
Neredbojias
Infinity has its limits.
David Stone写道：
David Stone wrote:
我遇到了一种情况，我得到了不同的
元素渲染在主div内，取决于它是否包含在< td>内。或者< div> -
http：// www。 chem.utoronto.ca/~dstone/test1.html
http://www.chem.utoronto.ca/~dstone/test2.html
I''ve run into a situation where I get different rendering of the
elements within the main div, depending on whether it is
contained within a <td> or a <div> -
http://www.chem.utoronto.ca/~dstone/test1.html
http://www.chem.utoronto.ca/~dstone/test2.html
test2.html中的第二个DIV延伸*在*第一个DIV下面。你可以通过添加border：2px solid magenta来看到这个
。到第二个DIV然后
从第一个DIV中移除背景。
因此你的LI和DD元素的左边距位于第一个
DIV。
解决方案是为你的第一个DIV修改宽度 - 在这种情况下10em似乎合适
- 然后将第二个DIV上的margin-left设置为稍微高一点（b
）以考虑填充和边距 - 比如12em。
如果我们把背景重新放回去，我们现在有了：
..sbmenu {
text-align：center;
float：left;
background-color：silver;
padding：0.5em;
margin-right：1em;
宽度：10em;
}
..second-div {
margin-left：12em;
border：2px solid magenta;
}
dt {
font-weight：bold;
}
（记得向第二个DIV添加class = second-div！）。重新加载和
所有东西都将是hunky dory（除了花边边框）。
基于表格的版本不会出现此问题的原因是两个表格单元格不重叠。
这对comp.infosystems来说真是个问题。 www.authoring.stylesheets
虽然。
- -
Toby A Inkster BSc（荣誉）ARCS
与我联系〜 http://tobyinkster.co.uk/contact
The second DIV in test2.html extends *underneath* the first DIV. You can
see this by adding "border:2px solid magenta" to the second DIV and then
removing the background from the first.
Thus the left margin of your LI and DD elements are underneath the first
DIV.
The solution is to fix a width to your first DIV -- 10em seems appropriate
in this case -- and then set the margin-left on the second DIV a little
higher than that (to take padding and margin into account) -- say 12em.
If we put the background back in, we''ve now got:
..sbmenu {
text-align: center;
float: left;
background-color: silver;
padding: 0.5em;
margin-right: 1em;
width: 10em;
}
..second-div {
margin-left: 12em;
border: 2px solid magenta;
}
dt {
font-weight: bold;
}
(Remember to add "class=second-div" to the second DIV!). Reload and
everything will be hunky dory (except for the garish border).
The reason this issue doesn''t occur with the table-based version is that
the two table cells don''t overlap.
This is really a question for comp.infosystems.www.authoring.stylesheets
though.
--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
文章< sj ***** *******@ophelia.g5n.co.uk>，
Toby Inkster< us ********** @ tobyinkster.co.uk>写道：
In article <sj************@ophelia.g5n.co.uk>,
Toby Inkster <us**********@tobyinkster.co.uk> wrote:
David Stone写道：
David Stone wrote:
我遇到了一种情况，我得到了不同的
元素渲染在主div内，取决于它是否包含在< td>内。或者< div> -
http：// www。 chem.utoronto.ca/~dstone/test1.html
http://www.chem.utoronto.ca/~dstone/test2.html
test2.html中的第二个DIV在第一个DIV下面扩展*。你可以通过添加border：2px solid magenta来看到这个。到第二个DIV，然后从第一个DIV中删除背景。
I''ve run into a situation where I get different rendering of the
elements within the main div, depending on whether it is
contained within a <td> or a <div> -
http://www.chem.utoronto.ca/~dstone/test1.html
http://www.chem.utoronto.ca/~dstone/test2.html
The second DIV in test2.html extends *underneath* the first DIV. You can
see this by adding "border:2px solid magenta" to the second DIV and then
removing the background from the first.
这取决于浏览器设置，我怀疑 - 当然，在我的
设置第二个div实际上比第一个div短。对于我遇到这个问题的原始页面，同样是
，并且我从
得到了测试页面。
因此你的LI和DD元素的左边缘位于第一个
DIV的下方。
但是不应该相对于dt定位dd
$ b在文档流程中它之前的$ b？同样地，我原本期望在ul中的li'相对于立即的
诉讼段落定位
;从层次结构来看，这比相对于封闭div的定位更有意义。
解决方案是修复第一个DIV的宽度 - 10em似乎是合适的
在这种情况下 - 然后将第二个DIV上的margin-left设置得比那个高一点（考虑填充和边距） - 比如12em。
如果我们把回到原点，我们现在有了：
.sbmenu {
text-align：center;
float：left;
background-color：silver ;
填充：0.5em;
margin-right：1em;
width：10em;
}
.second-div {
margin-left： 12em;
border：2px solid magenta;
}
That depends on the browser settings, I suspect - certainly, on my
setup the second div is actually shorter than the first. The same is
true of the original pages where I ran into this problem, and from
which I derived the test pages.
Thus the left margin of your LI and DD elements are underneath the first
DIV.
But shouldn''t the dd be positioned relative to the dt immediately
prior to it in the document flow? Similarly, I would have expected
the li''s in the ul to be positioned relative to the immediately
proceeding paragraph; hierarchically, this makes more sense than
positioning relative to the enclosing div.
The solution is to fix a width to your first DIV -- 10em seems appropriate
in this case -- and then set the margin-left on the second DIV a little
higher than that (to take padding and margin into account) -- say 12em.
If we put the background back in, we''ve now got:
.sbmenu {
text-align: center;
float: left;
background-color: silver;
padding: 0.5em;
margin-right: 1em;
width: 10em;
}
.second-div {
margin-left: 12em;
border: 2px solid magenta;
}
这样可行，如你所说：
http://www.chem.utoronto.ca/~dstone/test3。 html
...但我仍然无法摆脱每个dd应该相对于
定位的感觉它在dl中的前一个dt！
有没有一种方法在html（而不是css）中指定元素的流量
而不是我最初做的？我尝试在主div中的div或blockquotes里面嵌套p，dl和
ul，但这并没有
工作。
我开始明白为什么这么多人使用桌子进行布局......
That works, as you say:
http://www.chem.utoronto.ca/~dstone/test3.html
...but I still can''t shake the feeling that each dd ought to be
positioned relative to its preceding dt within a dl!
Is there a way in html (not css) to specify the flow of elements
other than what I did originally? I tried nesting the p, dl and
ul inside divs or blockquotes within the main div, but that didn''t
work either.
I''m beginning to understand why so many people use tables for layout...
这篇关于使用div与表数据进行不同的渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
