XHTML CSS浮点等帮助
[英]xhtml css floats etc help
问题描述
I'm really thinking of going back to tables because this is just #¤€&/@£ always something.... 
我真的在想回到餐桌，因为这总是＃¤€＆/ @£
<div style="float: left; width: 20%">
#1 <a>SmokA</a><br />
<small>Admin</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
I would buy a boat
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
<div style="float: left; width: 20%">
#2 <a>BusHka</a><br />
<small>Old school</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
<a href="#comment1">#1</a> is stupid
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
This gives: http://i29.tinypic.com/2iawh83.png 这给出了： http : //i29.tinypic.com/2iawh83.png
A huge space in the first div. 第一分区的巨大空间。 why? 为什么？ it dont if theres more than 10 comments for some reason 如果由于某种原因而发表的评论超过10条，则不会
ignore the stupid comments 忽略愚蠢的评论
4 个解决方案
解决方案1
0 2009-08-09 00:46:20
I would be careful about having width of 20% and 80% expect to fit on one line: if there is any padding or border they won't. 我会小心地将宽度设置为20％，而将80％设置为一行：如果有任何填充或边框，它们将不会。 It looks the way it should in ff 3. :D 在ff 3中看起来应该是这样。：D
解决方案2
0 2009-08-09 00:48:07
Pasting your HTML into the body of my generic testing-HTML-code-from-Stack-Overflow file: 将您的HTML粘贴到我的通用测试HTML代码从堆栈溢出文件的主体中：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Test</title>
</head><body>
<!-- Rebadow's code here -->
</body></html>
shows no problem. 显示没有问题。 Your problem must lie elsewhere, like in your CSS for instance. 您的问题必须存在于其他地方，例如在CSS中。
解决方案3
0 2009-08-09 00:50:24
if you are using IE6 using 20% with 80% with will often cause the line to overflow, i usually use 20% 79% and you should be ok 如果您使用的是IE6，而20％和80％的比例通常会导致线路溢出，我通常会使用20％79％的电压，您应该可以
to see if it is something overflowing try adding overflow:hidden to the divs and see if they line up, if so you know its something overflowing. 要查看是否溢出，请尝试将divs：hidden添加到div中，看看它们是否对齐，如果是这样，您就知道它溢出了。
have you used firebug or another inspection tool to see what the heights and widths actually are? 您是否使用过萤火虫或其他检查工具来查看实际的高度和宽度？
解决方案4
0 2009-08-09 01:36:33
Try adding a wrapper div around your floating ones. 尝试在浮动对象周围添加包装器div。 This is just to see if anything above this is affecting it somehow. 这只是为了查看是否有任何上述影响。
<div style="clear:both">
<div style="float: left; width: 20%">
#1 <a>SmokA</a><br />
<small>Admin</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
I would buy a boat
</div>
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
Also I wouldn't make a div just to display a line, but that's another issue entirely. 另外，我不会只显示一条线来显示div，但这完全是另一个问题。 Maybe try a HR tag, or wrap that div around everything, this is just to make the code make more sense structurally. 也许尝试使用HR标签，或将div包裹在所有内容上，这只是使代码在结构上更有意义。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.