ブラウザーのサイズを変更すると、真ん中の 3 つの要素 (みんなのためのもの、1 つの大きなコミュニティ、楽しいもの) の位置が固定されません。3 番目のボックスは、他の 2 つのボックスの下に入ります。
リンクはこちらhttp://www.archimedus.com/archimedus/
私はこのcssの問題と1日戦っています。
それは非常に単純かもしれませんが、それでも私は自分が犯した間違いを理解することができませんでした.
誰かアドバイスしてください。
ブラウザーのサイズを変更すると、真ん中の 3 つの要素 (みんなのためのもの、1 つの大きなコミュニティ、楽しいもの) の位置が固定されません。3 番目のボックスは、他の 2 つのボックスの下に入ります。
リンクはこちらhttp://www.archimedus.com/archimedus/
私はこのcssの問題と1日戦っています。
それは非常に単純かもしれませんが、それでも私は自分が犯した間違いを理解することができませんでした.
誰かアドバイスしてください。
まず、html マークアップを確認します。id の代わりにbottom_textクラスを使用する必要があります。ドキュメント内で ID が重複していてはなりません。
次に、divの幅で何をしたいのかを決定する必要があります
あなたの質問に固有
ターゲットが再配置効果を回避することである場合は、コンテナ divでラップし、その中にフロートさせます。次に、ラッパー div に最小幅を設定します。オーバーフローがどのように動作するかを決定します。
フローティング div は、柔軟なレイアウトなどを取得するために相対マージンを使用できます。
これを修正する最も簡単な方法は、ボックスの最大幅を 33% にすることです。
#content_mass_bottom #bottom_text {
float: left;
width: 425px;
max-width: 33%;
}
bottom_text
div を div に移動できますtbox1/2/3
。
<div id="tbox1">
<img src="/archimedus/images/everybody.png" class="everybody">
<div id="bottom_text">
<p class="bottom_text">Many hands make light work. Imagine what we can achieve with our collective abilities With Archimedus there is an unlimited amount of knowledge available, waiting to be tapped by you. You’ll never be bored again. Best of all… it’s free!</p>
</div>
</div>