我正在创建一个用于 eBay 列表的模板。我添加了一个侧边栏以 float 到我的主要文本正文的右侧。但是，当我将源代码复制到 eBay 列表中时，它会离开正文正文，留下空白。我该如何做到无论主文本框的宽度如何，侧边栏都将紧靠其右侧对齐。
我是一个完全的编码初学者，我知道我刚才问的可能没有任何意义，但我已经包含了下面的代码，如果你在浏览器中全屏打开它，你就会明白我的意思。
<head>
<div id="pdcontainer">
<style>
#pdcontainer {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
#sidebar {
position:relative; float:right; width:175px;
min-height:2450px;border:5px solid #66CCFF;
}
body{margin:0;padding:0;width:500px;height:2455px;border:5px solid #66CCFF;"}
</style>
</head>
<body>
<div id="sidebar">
<br/><br/><br/><b><font size=+1><center></center></font></b><br/><br/><br/>
</div>
<div id="body"> Testfffffffffff <br/>
</div>
</body>
最佳答案
这就是你想要的吗？
jsfiddle: http://jsfiddle.net/vdZGL/1/
您需要处理代码的格式和结构。特别是如果您一开始使用模板，请保持简单和干净。
这是我所做的:
我已将您的 <div id="body"> 重命名为至 <div id="content"> (因为它更符合逻辑)。
正确包装了 #sidebar和 #content #pdcontainer 内的 div分区
复制了您应用到 <body> 的所有样式并以新样式放置它们 #content .
二手 position:relative;和 float:left;对于 #content和 #sidebar分区。
编辑:另请注意，您的<head> 中不应包含 html 代码。标签。
例如你有这条线 <div id="pdcontainer">在你的<head>标签。确保删除此行并按照上面的 jsfiddle 进行操作。
关于html - 对齐边栏 HTML/CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16226112/