0

基本的に、私は 1 つの div を持っています。これには、float: right を持つ最後の 1 つとは別に、float: left を持つ 4 つの div があります。

レスポンシブ Web ページを作成しています。基本的に、列「名前」から離れた3つの列すべてが、必要な幅をすべて占めるようにしたいと思います。幅の残りはその列に入る必要があります-それが理にかなっている場合。

<div style="width: 100%; border-bottom: 1px solid #e5e5e5; padding: 10px 0 10px; font-size: 1.2em; overflow: auto;">
            <div style="float: left; width: 5%;"><input type="checkbox" id="ID"></div>
            <div style="float: left; width: 5%;">Code</div>
            <div style="float: left; width: 80%;">Name</div>
            <div style="float: right; width: 10%;">100 &euro;</div>
        </div>

解決策を見つけました！

解決策を見つけました！フロートを削除し、調整する必要がある列に隠されたオーバーフローを追加すると、必要なものを取得するのに役立ちました!

    <div style="width: 100%; border-bottom: 1px solid #e5e5e5; padding: 10px 0 10px; font-size: 1.2em; overflow: auto;">
            <div style="float: left; width: auto; margin-right: 1%;"><input type="checkbox" id="ID"></div>
            <div style="float: left; width: auto; margin-right: 3%;">Code</div>
            <div style="float: right; width: auto; margin-left: 3%;">100 &euro;</div>
            <div style="overflow: hidden;">Name></div>

        </div>
4

1 に答える 1

0

div の float を指定すると、コンテンツが強制的にその周りに流れるため、一番右の div をフローティングせずにデフォルトのままにするだけで問題ありません。あなたの場合、100 ユーロの div からスタイリングを削除するだけで、残っているスペースを占有します。

ここでの問題は、明示的な幅のパーセンテージを設定することは、まさにあなたが望むものではないということです-あなたがする必要があるのは、javascriptを使用して内部コンテンツに基づいてdivのサイズを動的に変更することです.

于 2013-07-11T21:54:53.223 に答える