Question

我正在创建一个用于eBay列表的模板。我添加了一个侧边栏浮动到我的主文本正文的右侧。然而，当我将源代码复制到eBay列表中时，它会远离主文本体，留下与空白区域的间隙。如何制作它，使得无论主体文本框的宽度如何，侧边栏都会紧靠其右侧。

我是一个完整的编码初学者，我知道我刚才提到的内容可能没有任何意义，但我已经包含了下面的代码，如果你在浏览器中全屏打开，你会明白我的意思。 / p>

<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>

Answer 1

这一行可能存在一个问题：

<div id="sidebar">
 <br/><br/><br/><b><font size=+1><center></b></font></center><br/><br/><br/>
</div>

格式不正确 - <font>标记在开始和结束<center>标记内关闭 - 我强烈建议您避免使用字体和中心标记，但如果必须使用它们，请尝试以下操作：< / p>

<div id="sidebar">
  <br/><br/><br/><b><font size=+1><center></center></font></b><br/><br/><br/>
</div>

您可以使用CSS“<font>”属性代替font-size。而不是<center>，您可以使用text-align: center。

此外，您应将<div>元素的样式设置为position: relative;

Answer 2

这就是你要追求的吗？

jsfiddle： http://jsfiddle.net/vdZGL/1/

您需要处理代码的格式和结构。特别是如果您首先处理模板，请保持简单和干净。

以下是我所做的事情：

我已将您的<div id="body">重命名为<div id="content">（因为它更符合逻辑）。

正确包裹了#sidebar div中的#content和#pdcontainer div。

复制了您已应用于<body>的所有样式，并将其置于#content的新样式中。

对position:relative;和float:left; div使用了#content和#sidebar。

编辑：另请注意，您的<head>代码应包含否 html代码。

e.g。您的<div id="pdcontainer">代码中有<head>行。确保删除此行并按照上面的jsfiddle。

对齐边栏HTML / CSS

2 个答案: