2

以下は私のhtmlとcssコードです

<body>
<div style="display: inline; postion: relative; float: left; width: 20%; min-height: 350px; background-color:red">
TESSSSSSSSSTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT123
</div>
<div style="display: inline; postion: relative; float: left; width:80%; min-height: 350px; background-color:green">

</div>

</body>
</html>

ウィンドウのサイズを変更すると、2 つの div がオーバーラップします。これを回避する方法はありますか? ウィンドウのサイズに関係なく、2 つの div が常に 1 行に収まるようにします (また、両方の div の内容が各 div 内にラップされます)。

どんな助けにも感謝します、ありがとう、

4

4 に答える 4

2

それらwidthsは%値を使用して定義されるため、ブラウザーのサイズに応じて拡大/縮小します。テキストが隣接するテキストと重ならないようにするには、テキストを含む最初のテキストに<div>追加してください。また、使用しているブラウザについても言及してください。word-break: break-all;<div>

例

于 2013-03-01T05:00:58.240 に答える
0

divが重なっておらず、テストテキストにはスペースがなく、ブラウザはスペースのテキストのサイズを変更するだけです。テストテキストにスペースを追加してみると、テキストのサイズが変更されることがわかります（これまでに、divが実際に重なっていないことも確認できます）。

また、要素をインラインに設定した場合、これまでのように要素を左に浮かせても意味がありません。ウェブサイトのレイアウトの一部としてdivを使用することを計画している場合は、divをブロック要素として保持するように、divを左にフローティングにしておくことをお勧めします。これにより、CSSでより多くのスタイルを設定できます。

于 2013-03-01T05:09:27.150 に答える
0

html

<div class="firstDiv"></div>
<div class="secondDiv"></div>

CSS

.firstDiv {
    height:100px;
    width:60%;
    float:left;
    background-color:#222;
}
.secondDiv {
    height:100px;
    width:60%;
    float:left;
    background-color:#000;
}

パーセンテージ%を使用して div をより修正可能にする DEMO

于 2013-03-01T05:11:28.390 に答える
0

それらは重ならず、幅は に従って変化し<body>、隣り合った同じ行にとどまります。

于 2013-03-01T04:59:24.750 に答える