0

eBay リストに使用するテンプレートを作成しています。本文の右側にフロートするサイドバーを追加しました。しかし、ソース コードを 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>
4

2 に答える 2

0

これはあなたが求めているものですか？

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

コードのフォーマットと構造に取り組む必要があります。特に、最初にテンプレートに取り組んでいる場合は、シンプルでクリーンなままにしてください。

これが私がやったことです：

あなたの名前をに変更<div id="body">しました<div id="content">（より論理的な意味があるため）。

#sidebarおよびdiv を div#content内に正しくラップしました#pdcontainer。

に適用したすべてのスタイルをコピーし<body>、 の新しいスタイルに配置しました#content。

position:relative;とdivfloat:left;の両方に#content使用されます。#sidebar

編集:また、タグに html コードを含めないでください。<head>

たとえば、タグに行<div id="pdcontainer">があります<head>。この行が削除されていることを確認し、上記の jsfiddle に従います。

于 2013-04-26T02:14:16.167 に答える