3

コンテンツの重複に問題があります。HTML に対してこのコードを試すと、content_left 内のテキストが、含めたい領域全体に重なっています。高さをautoに変更しても改善しません。コンテンツが右に重なって下が切れてしまいます。

#wrapper {
  height: 1500px;
  margin: 20px auto auto auto;
  padding: 0;
  background: url(wrapper.png);
}

.content_left {
  float: left;
  width: 600px;
  padding: 20px 0 0 30px;
  margin-left: -300px;
  position: relative;
  height: auto;
}
<div id="wrapper">

  <div id="header">

    <div id="logo">
    </div>

    <div id="header_right">
    </div>
  </div>
  <div class="content_left">
    hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh
    hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh
    hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh hfhfhfhfhfhfhfhfhfhfhffhfhhfhfhfhfhfhfhfhfhfhfhffhfh
  </div>

  <div class="content_right">
  </div>

  <div class="footer">
    Footer goes here
  </div>
</div>

例jsfiddle の例

4

2 に答える 2

6

完全なフィドルを見て、私ができるコメントは

  • からを削除height:700px;します#wrapper
  • overflow:hiddenに追加#wrapper
  • を追加word-wrap: break-word;します.content_left
    (テキストが長すぎて 1 行に収まらないため、単語分割が有効になります。 )

結果はhttp://jsfiddle.net/gaby/L6acE/1/で見ることができます

この機能のサポートについては、http://caniuse.com/#search=word-wrapで確認できます。

于 2012-11-17T17:12:23.633 に答える
5

文字列（単語）にスペースがないので試してみてください 

 .content_left{overflow:hidden;}

そして私はあなたのものである限り有効な文字列（単語）を考えていません

于 2012-11-17T16:09:22.217 に答える