DIV，跨度和显示:内联 [英] DIV, Span, and Display: Inline

问题描述

我创建了一种称为"Thumb"的样式，该样式创建了一个100x120px的带有弯曲边框的框，以提供缩略图和小标题(请参见底部的HTML代码).

如果我使用DIV标记，它会像我期望的那样绘制它们，但是只会在一行上放1.

使用显示:DIV标签上的内联似乎阻止了图像的显示

如果我使用Span，则在IE上看起来还可以，但是在Firefox 4(RC1)上，边框与我提供的尺寸不符. Opera与Firefox相同，但不保留大小

我试图避免使用表格，因为它是动态的，并且我想绘制的盒子数量会有所不同.

有谁知道我如何保持自己的包装盒格式不变，但是内联(边缘包裹)并能在所有浏览器中使用?

我不是一个Web开发人员(主要是因为这样的挫败感)，所以如果有人可以提供帮助，我将不胜感激.

谢谢

I''ve created a style called "Thumb", which creates a 100x120px box with a curved border for the purpose of providing a thumbnail and a small caption (see HTML code at the bottom).

If I use the DIV tag, it draws them as I would expect, but will only put 1 on a line.

Using Display: Inline on the DIV tag seems to stop the image from appearing

If I use Span, it looks okay on IE, but on Firefox 4 (RC1) the border does not conform to the size I have provided. Opera is the same as Firefox in not retaining size

I''m trying to avoid using tables because it is dynamic, and the number of boxes I want to draw will vary.

Does anybody know how I keep my boxes with my format, but inline (wrapping at the edges) and works in all browsers?

I''m not much of a web developer (mainly for frustrations like this), so if anybody can help, I would appreciate it.

Thanks

.Thumb
{
    border-top: #cccc99 1px solid;
    border-right: #cccc99 1px solid;
    border-left: #cccc99 1px solid;
    border-bottom: #cccc99 1px solid;
    border-radius: 4px;
    width: 100px;
    height: 120px;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

<div class="Thumb"><img src="blar.png" width="100px" height="100px"><br>Test</div>
<div class="Thumb"><img src="blar.png" width="100px" height="100px"><br>Test</div>
<div class="Thumb" style="display: inline;><img src="blar.png" width="100px" height="100px"><br>Test</div>
<div class="Thumb" style="display: inline;><img src="blar.png" width="100px" height="100px"><br>Test</div>
<span class="Thumb"><img src="blar.png" width="100px" height="100px"><br>Test</span>
<span class="Thumb"><img src="blar.png" width="100px" height="100px"><br>Test</span>
<span class="Thumb"><img src="blar.png" width="100px" height="100px"> Test</span>
<span class="Thumb"><img src="blar.png" width="100px" height="100px"> Test</span

>

>

推荐答案

欢迎使用浏览器不兼容的世界！
您不可能在所有情况下都赢.我会尽量保持样式简单；这使您的内容呈现更加稳定.请记住，您使用外观是为了寻找网站的内容，而不是为了装饰.在我看来，最好的设计师永远不会记住给设计留下深刻印象的想法，而是会尝试使设计保持隐形"状态，着重于提高可读性和功能性.

此外，您还可以使用display:block样式. display:inline-block;等.(查看所有显示样式: http://www.w3schools.com/css/pr_class_display.asp [ ^ ].)

看来Mozilla问题仅在inline显示屏上出现.但不适用于我的inline-block.不要尝试一种通用的.Thumb样式，而是尝试创建单独的样式，例如p.Thumb，div.Thumb或span.Thumb.

—SA

Welcome to the world of Browser incompatibilities!
You cannot win in all cases. I would try to keep styles as simple as possible; which makes you content rendering much more stable. Remember, you used looks for a Web site for its content, not for decoration. In my opinion, best designer never keeps in mind the idea of impressing anyone with the design but would try to keep design "invisible", focusing on helping readability and functionality.

Additionally, you can play with the styles display:block; display:inline-block;, etc. (See all display styles: http://www.w3schools.com/css/pr_class_display.asp[^].)

It looks like the Mozilla problem is only with the inline display; but not inline-block, which works for me. Instead of attempting one universal .Thumb style, try to create separate styles such as p.Thumb, div.Thumb or span.Thumb.

—SA

这篇关于DIV，跨度和显示:内联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！