3つのバーのレイアウト:中間バーの固定幅の両側の適応の実現方法

シリーズ記事:『2つの欄のレイアウト:1つの欄が幅を固定し、もう1つの欄が適応する実現方法』.
本稿では,主に3つの欄レイアウトにおける「中間欄固定幅両側適応」のレイアウト方法をまとめた.
方法1:両側の絶対レイアウト、中間にmarginを使用する
HTMLコード:

<div class="parent">
    <div class="main">
    <div class="left">
    <div class="right">
</div>

CSSコード:

.parent {
    position: relative;
}
.left, .right {
    display: absolute;
}
.left {
    width: 230px;
}
.right {
    width: 200px;
}
.main {
    margin-left: 230px;
    margin-right: 200px;
}

利点:互換性が良い;div.left、div.rightは絶対位置決めを使用し、ドキュメントフローから離れているため、div.left、div.right、div.mainのロード順序は任意です.
方法2:フローティングレイアウト+margin
HTMLコード:

<div class="left"></div>
<div class="right"></div>
<div class="main"></div>

CSSコード:

.left {
    float: left;
    width: 230px;
}
.right {
    float: right;
    width: 200px;
}
.main {
    margin-left: 230px;
    margin-right: 200px;
}

欠点:適応幅バーdiv.mainはdiv.leftとdiv.rightの後にロードする必要があります.div.mainはfloat属性を定義できないため、float:left/rightを定義するとdisplay:inline-block属性を定義し、div.mainの幅を自分の内容の幅に等しくし、私たちの適応欄の要求に達しません.ただし、div.mainがfloat:left/rightプロパティを定義せず、div.leftまたはdiv.rightの前にある場合、div.leftまたはdiv.rightはdiv.mainの左側または右側にフローティングできません.以上、この方法はdiv.mainをdiv.leftとdiv.rightの後ろにロードするしかありません.
方法3:フローティングレイアウト+負margin
HTMLコード:

<div class="main-box">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

CSSコード:

.main-box {
   float: left;
   width: 100%;
}
.main {
    margin-left: 230px;
    margin-right: 200px;
}
.left {
    float: left;
    width: 230px;
    margin-left: -100%;
}
.right {
    float: left;
    width: 200px;
    margin-left: -200px;
}