在Netscape / Opera下的内联DIV [英] Inline DIVs Under Netscape/Opera
问题描述
我想显示一系列内联，固定宽度的DIV，这些DIV将包装到
列中 - 基本上是一个表。我可以在Internet Explorer下执行此操作，但Netscape或Opera下的相同代码不能按预期运行。 DIV
崩溃进入小矩形（我在它们周围放置一个边框，这样我就可以看到了b $ b）但是它们的内容（一些中间对齐的文本）跨越了
页面的宽度。如果不是我添加的边框，看起来每个DIV都是
宽度：100％。而不是一些较小的列，我得到一个大的，胖的
列。我究竟做错了什么？这里是代码（只有两列，简单来说是
）：
<？xml version =" 1.0" encoding =" us-ascii"？>
<！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.0 Strict // EN"
" ; http：//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns =" http：// www。 w3.org/1999/xhtml" xml：lang =" en-US">
< head>
< title>< / title>
< ; meta http-equiv =" Content-Type" content =" application / xhtml + xml;
charset = us-ascii" />
< style type =" text / css">
div.productListing {
display：inline;
宽度：128px;
text-align：center;
/ * temp * /
border ：实心1px红色;
}
< / style>
< / head>
<正文>
< div class =" productListing">
< div class =" productImageContainer">< img class =" ; productImage" src ="＃"
alt =" Cufflinks" />< / div>
< div class =" productName"> Gold Cufflinks< / div>
< div class =" description" >它们是袖扣，它们是金色的。< / div>
< div class =" price"> $ 59.90< / div>
< / div>
< div class =" productListing">
< div class =" productImageContainer">< img class = " productImage" src ="＃"
alt =" More Cufflinks" />< / div>
< div class =" productName"> Gold Cufflinks< / div>
< div class =" description" >这些袖扣也是金色的。< / div>
< div class =" price"> $ 69.90< / div>
< / div> ;
< / body>
< / html>
< blockquote> 59.90< / div>
< / div>
< div class =" productListing">
< div class =" productImageContainer">< img class =" productImage" src ="＃"
alt =" More Cufflinks" />< / div>
< div class =" productName"> Gold Cufflinks< / div>
< div class =" description" >这些袖扣也是金色的。< / div>
< div class =" price">
69.90< / div>
< / div>
< / body>
< / html>
2004年1月28日星期三23:46:40 GMT，Adam Siler< as **** @ icglp.com>写道：
我想显示一系列内联，固定宽度的DIV，它们将
包装成
列 - 基本上是一个表。我可以在Internet Explorer下执行此操作，但是在Netscape或Opera下的相同代码不能按预期运行。
...
<？xml version =" 1.0"编码= QUOT; US-ASCII"？>
... div.productListing {
显示：内联;
宽度：128px;
text-align：center;
根据规范，你不能在''inline''元素上设置宽度。 MSIE 6
也知道这一点，但你用XML序言切换一个它的Quirks模式，
所以它使用bugward兼容渲染。
您可以尝试使用''inline-block''（CSS 2.1）或将
DIV保持为''block''，然后浮动或定位它们彼此。
-
Rijk van Geijtenbeek
网络是一种拖延机器：
它可以吸收所需的时间，以确保你不会得到任何真正的工作。 - J.Nielsen
i want to display a series of inline, fixed-width DIVs that will wrap into
columns - a table, basically. i can do it under Internet Explorer, but the
same code under Netscape or Opera does not behave as expected. the DIVs
"collapse" into small rectangles (i put a border around them so i could
see), but their contents (some middle-aligned text) span the width of the
page. if not for the borders that i added, it would appear that each DIV was
width: 100%. rather than a number of smaller columns, i get one big, fat
column. what am i doing wrong? here''s the code (with only two columns, for
simplicity):
<?xml version="1.0" encoding="us-ascii"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title></title>
<meta http-equiv="Content-Type" content="application/xhtml+xml;
charset=us-ascii" />
<style type="text/css">
div.productListing {
display: inline;
width: 128px;
text-align: center;
/* temp */
border: solid 1px red;
}
</style>
</head>
<body>
<div class="productListing">
<div class="productImageContainer"><img class="productImage" src="#"
alt="Cufflinks" /></div>
<div class="productName">Gold Cufflinks</div>
<div class="description">They are cufflinks and they are gold.</div>
<div class="price">$59.90</div>
</div>
<div class="productListing">
<div class="productImageContainer"><img class="productImage" src="#"
alt="More Cufflinks" /></div>
<div class="productName">Gold Cufflinks</div>
<div class="description">These cufflinks are also gold.</div>
<div class="price">$69.90</div>
</div>
</body>
</html>
59.90</div>
</div>
<div class="productListing">
<div class="productImageContainer"><img class="productImage" src="#"
alt="More Cufflinks" /></div>
<div class="productName">Gold Cufflinks</div>
<div class="description">These cufflinks are also gold.</div>
<div class="price">
69.90</div>
</div>
</body>
</html>
On Wed, 28 Jan 2004 23:46:40 GMT, Adam Siler <as****@icglp.com> wrote:
i want to display a series of inline, fixed-width DIVs that will wrap
into
columns - a table, basically. i can do it under Internet Explorer, but
the
same code under Netscape or Opera does not behave as expected.
...
<?xml version="1.0" encoding="us-ascii"?> ... div.productListing {
display: inline;
width: 128px;
text-align: center;
You can''t set width on ''inline'' elements, according to the spec. MSIE 6
also knows this, but you switch one it''s Quirks mode with the XML prolog,
so it uses bugward compatible rendering.
What you could try, is either using ''inline-block'' (CSS 2.1) or keep the
DIVs as ''block'', and float or position them next to each other.
--
Rijk van Geijtenbeek
The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won''t get any real work done. - J.Nielsen
这篇关于在Netscape / Opera下的内联DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
