3

HTML ページを同じ幅の 2 つの列に分割して、それぞれの半分が 1 つのページのようになり、そのコンテンツが残りの半分に入らないようにしたいと考えています。float:leftfor#leftとfloat:rightforをやったのです#rightが、後半に内容が重なってしまいます。どうすれば目標を達成できますか？

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>
4

2 に答える 2

6

両方の列を左にフロートする必要があります。コメントで報告した問題については、word-wrap: break-word;一部のウェールズの村を除いて人間の言語には存在しない、90 文字の長さの偽の単語も使用しないでください。フィンランド語とドイツ語には長い単語がありますが、それでもなおです。lorem ipsum代わりに使用してください。URL は依然としてかなり長くなる可能性があります。

ここにデモがあります：http://jsfiddle.net/xZJyE/

HTML:

<div id="content">
  <div class="left w50">LEFT</div>
  <div class="left w50">lorem ipsum</div>
</div>

CSS:

html {
    font-size: 62.5%;
}
body {
    background-color: white;
    color: black;
    font-family: helvetica, arial, sans-serif;
    font-size: 1.4em; /* equiv 14px */
    line-height: 1.5; /* adapt to your design */
}
/* you shall not pass */
div, textarea, table, td, th, code, pre, samp {
    word-wrap: break-word;
}
.left {
    float: left;
}
.w50 {
    width: 50%;
}
于 2013-03-10T02:08:55.387 に答える
1

これが機能するには、css が適切にフォーマットされている必要があります。

コンテンツ
の境界線:0;
パディング:0;
と:100%;

左
ボーダー:0;
マージン:0;
パディング:0;
フロート:左;
幅:50%;

右
枠:0;
マージン:0;
パディング:0;
フロート:右;
幅:50%;

パディング、マージン、改行しない文字列などへの侵入により、コンテンツが重複します...コンテナ内にあるため、パディングは問題ないと思います...しかし、あなたはアイデアを得る.

于 2013-03-10T01:55:17.720 に答える