CSSは左固定と右適応のレイアウト方法を実現します

   .脇に{
        フロート: 左;
        幅: 200ピクセル;
        背景色: 赤;
    }
    。コンテンツ{
        左マージン: 200px;
        背景色: 青;
    }
    
<div class="aside">
    私はいつもとても良い人間でしたし、いつもとても良い人間でした。 私はいつもとても良い人間でしたし、いつもとても良い人間でした。
</div>
<div class="content">
    私はいつもとても良い人間でしたし、いつもとても良い人間でした。 私はいつもとても良い人間でしたし、いつもとても良い人間でした。
</div>

.脇に{
    フロート: 左;
    右マージン: -200px;
    幅: 200ピクセル;
    背景色: 赤;
}
。コンテンツ{
    フロート: 右;
}
.コンテンツ .インナー{
    左マージン: 200px;
    背景色: 青;
}
<div class="aside">
私はいつもとても良い人間でしたし、いつもとても良い人間でした。 私はいつもとても良い人間でしたし、いつもとても良い人間でした。
</div>
<div class="content">
<div class="inner">
私はとても良い人間で、自分の仕事にとても満足しています。私は自分の仕事にとても満足しています。私は自分の仕事にとても満足しています。私は自分の仕事にとても満足しています。私は自分の仕事にとても満足しています。私は自分の仕事にとても満足しています。私は自分の仕事にとても満足しています。私は自分の仕事にとても満足しています。
</div>
</div>

.脇に{

フロート: 左;
幅: 200ピクセル;
}
。コンテンツ{

フロート: 右;
計算:(100% - 200px);
}
<div class="aside"> 
私はいつもとても良い人間でしたし、いつもとても良い人間でした。 私はいつもとても良い人間でしたし、いつもとても良い人間でした。
</div>
<div class="content">
私はいつもとても良い人間でしたし、いつもとても良い人間でした。 私はいつもとても良い人間でしたし、いつもとても良い人間でした。
</div>

体{
ディスプレイ: フレックス;
}
.脇に{

フレックス: 0 0 200px;
背景色: 赤;
}
。コンテンツ{

フレックス: 1;
背景色:青;
}

<div class="aside">
私はいつも世界はエネルギーに満ちていると思っていましたが、私はいつも世界はエネルギーに満ちていると思っていました。 私はいつも世界はエネルギーに満ちていると思っていましたが、私はいつも世界はエネルギーに満ちていると思っていました！
</div>
<div class="content">
私はとても良い人間で、物事に対処するのがとても上手です。私はとても良い人間で、物事に対処するのがとても上手で、良い人間でいるのがとても上手で、良い人間でいるのがとても上手です。
</div>