html - 2 つの div を隣り合わせに配置し、左がスペースを埋める

Question

右の幅に応じて左のサイズが自動調整されるように、 2 つdivの s を隣り合わせ (左と右) に配置するにはどうすればよいですか。divdiv

たとえば、右側のコンテナが100px広く、divコンテナ内の右側が10px広い場合、左側divは90px広いです。または、右divが40px広い場合は左が60px広い。

ありがとう

Answer 1

これは私がよく使う裏技です

<style>
    .sidebar {
        width: 600px;
        float: left;
        background: #00ff00;
    }

    .content {
        margin-left: 610px;
        background: #ff0000;
    }
</style>

<div class="sidebar">
    sidebar
</div>

<div class="content">
    content
</div>

1 つの要素の幅を設定してフロートし、横に配置したい要素を、フローティング要素と同じ幅の余白を付けて強制的に隙間に入れます。

警告: この例では、sidebar 要素がソース コードの最初に表示されなければなりません。

1 つの要素の幅と他の要素のマージンを変更することで、列の幅を動的に調整できます。

ソースをデスクトップ上のhtmlファイルに保存し、それをいじってみて、それがどのように機能するかを理解してください。

Answer 2

上記のコメントに同意します。float: right;画面の右側に必要な div があることを確認してください。私はこれを追加のコメントとして残していたでしょうが、そうするのに十分な担当者がいません。

<style>
    .left {
        width: auto;
    }

    .right {
        width: 100px;
        float: right;
    }
</style>