2

私の .left div は、CSS で幅が 260px に設定されていますが、何らかの理由で、計算されたスタイルが 980px (ラッパーの全幅) で表示されるため、ページ上で別の 5 つ (div 右) を押し出しています。サイトはここにあり、私が話しているセクションは、左側の h2 と右側の「who am i?」の段落テキストです。セクション。

HTML

<div id="topwrapper">
      <div class="left">
        <h2>I create films <span class="green">//</span></h2>
        <h2>I dance <span class="green">//</span></h2>
        <h2>I do silly things <span class="green">//</span></h2>
        <h2>I explore <span class="green">//</span></h2>
      </div>
      <div class="right">
        <p>lorem ipsum (changed as text is wordy)</p>
         <p>lorem ipsum (changed as text is wordy)</p>
         <p>lorem ipsum (changed as text is wordy)</p>

      </div>
    </div>

CSS

.left {
width:250px;
float:left;
text-align:right;
padding-right:50px;
}

.right {
    float:right;
    width:680px;
}
4

3 に答える 3

1

そのCSSを含めてよろしいですか？見えません。ええ..そのCSSは間違いなくロードされていません。

于 2012-09-01T00:13:31.800 に答える
0

悪いマークアップと関係がある可能性があります。// html をコメントアウトする方法ではありません。HTML コメントは次のようになります。

<!-- </span></h2>  -->

不適切なマークアップがあると、ブラウザーは「コメント アウト」されたスパン要素など、一致しない要素を一致させるためにおかしな動作をします。

私の最初の考えです。でも探し続けます。

http://w3schools.comで JavaScript エディターを使用しましたが、うまくいきました。その Web サイトで自分のコードを編集するのが好きです。これは私が使用したコードです。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.left {
width:250px;
float:left;
text-align:right;
padding-right:40px;
border:1px solid blue;
}

.right {
    float:right;
    width:250px;
border:1px solid green;
}

</style>

</head>
<body>

<div id="topwrapper">
      <div class="left">
        <h2>I create films <span class="green"></h2>
        <h2>I dance <span class="green"></h2>
        <h2>I do silly things <span class="green"></h2>
        <h2>I explore <span class="green"></h2>
      </div>
      <div class="right">
        <p>lorem ipsum (changed as text is wordy)</p>
         <p>lorem ipsum (changed as text is wordy)</p>
         <p>lorem ipsum (changed as text is wordy)</p>

      </div>
    </div>
  </div>

</body>
</html>
于 2012-09-01T00:10:24.390 に答える
0

「ラッパー」の終了 div が表示されませんか? HTMLが壊れているため、これが問題になる可能性があります

これを #topwrapper .left { ここにスタイリング } で使用してみてください

CSSも読み込まれていないと思いますか？頭の中のリンクをチェック

于 2012-09-01T00:10:54.700 に答える