ホームページ > 記事 > ウェブフロントエンド > CSS: 3 列レイアウト、両側固定、middle で適応_html/css_WEB-ITnose
面接でレイアウトについて質問されました:
3列レイアウト、両側固定、中央で適応
その時の答えは、左側と右側がそれぞれ左右にフローティングであるということでした。そして真ん中は適応的で、マージンを設定しました。効果は得られていると考えられます。
<style type="text/css"> *{margin:0;padding:0;} .left{float:left;width:300px;background:red;height:500px;} .right{float:right;width:300px;background:red;height:500px;} .center{margin:0 230px;background:blue;}</style><div class="left">left</div><div class="right">right</div><div class="center">center</div>
注: 中央の列は一番下に配置する必要があります
インターネット上で位置決めを実装する別の方法を見つけました。左側と右側は固定位置に設定されており、中央は適応型です。
<style type="text/css"> html,body{margin:0;padding:0;height:100%;} .left,.right{ position:absolute; top:0; width:300px; height:100%; background-color:blue; } .left{ left:0; } .right{ right:0; } .center{ margin:0 230px; height:100%; color:#f90; background:red; }</style>
このような面接の質問もあります。たとえば、中央が固定、両側が固定、右側が適応などです。時間があれば勉強します。