CSSレイアウトの片側固定幅側適応

20130 ワード

まずいくつかの案があることを確定してから、その長所と短所を分析します.
1、float+margin;
2、position+margin;
3、float+負margin+ネストdiv;
4、display:table+display:table-cell;
上のコード:

1つ目のシナリオ:float+margin


<html>
<head>
    <meta content="utf-8" charset="utf-8" />
    <title> Css - title>
    <style>
     .wrap{background: gray; width:1000px;margin:0px auto;}
     .aside-left{width:200px;float:left; background:red; margin-left:10px;height:80px;}
     .main{margin-left:210px; background: blue; height:50px;}
     .clear{clear:both;}
    style>
head>
<body>
    <div class="wrap">
        <div class="aside-left"> div>
        <div class="main">
             
            <div class="clear">div>
             
        div>

    div>

    <div class="footer">
        <span> span>
    div>

body>
html>

このスキームでは,幅のfloatを固定し,適応容器の前に置く.
利点:簡単で、速い.
欠点:1、フローティングの高さが適応の高さより大きい場合、親コンテナは最後にフローティングをクリアしない場合、親コンテナの高さは適応の高さである.
2、アダプティブ内のサブコンテナがフローティングをクリアしている場合、その後の要素はフローティング高さの下にあります.

第2のシナリオ:position+margin


<html>
<head>
    <meta content="utf-8" charset="utf-8" />
    <title> Css - title>

    <style>
     .wrap{background: gray; width:1000px;margin:0px auto; position: relative;}
     .aside-left{position: absolute; left:0px; top:0px; width:200px; height:80px;background: red; }
     .main{margin-left:210px; background: blue; }
     .clear{clear:both;}
    style>

head>
<body>

    <div class="wrap">

        <div class="aside-left"> div>

        <div class="main">
             
            <div class="clear">div>
             
        div>

    div>

    <div class="footer">
        <span> span>
    div>

body>
html>

このレイアウトでは、親コンテナはposition:relativeです.固定幅はposition:absolute;適応はmarginです.
利点:簡単で、便利です;
欠点:固定幅の高さが適応高さより大きい場合、全体の高さは適応高さと一致する.

第3のスキーム:float+負margin+ネストdiv;


<html>
<head>
    <meta content="utf-8" charset="utf-8" />
    <title> Css - title>

    <style>
     .wrap{background: gray; width:1000px;margin:0px auto; overflow: hidden; }
     .aside-left{ width:200px; height:80px;background: red; float:left;}
     .main{background: blue;  width:100%;margin-right:-210px; float:right;}
     .main-content{margin-right:200px;}
     .clear{clear:both;}
    style>

head>
<body>

    <div class="wrap">

        <div class="aside-left"> div>

        <div class="main">

            <div class="main-content">
                 
                <div class="clear">div>
                 
            div>

        div>

        <div class="clear">div>

    div>

    <div class="footer">
        <span> span>
    div>

body>
html>

このスキームは、親容器overflow:hidden;両方のサブコンテナはfloatで、異なる方向で、それから適応するコンテナは負のmarginで、その中でサブコンテナを加えてすべての内容を包んで正のmarginにあげます.最後に、フローティングをクリアします.
利点:問題を解決でき、負の影響はありません.
短所:書き方が複雑.

第四案:display:table+display:table-cell



<html>
<head>
    <meta content="utf-8" charset="utf-8" />
    <title> Css - title>

    <style>
     .wrap{background: gray; width:1000px;margin:0px auto; display:table; }
     .aside-left{ width:200px; height:80px;background: red; display: table-cell;}
     .main{background: blue;  display: table-cell;}
     .clear{clear:both;}
    style>

head>
<body>

    <div class="wrap">

        <div class="aside-left"> div>

        <div class="main">
             
            <div class="clear">div>
             
        div>

    div>

    <div class="footer">
        <span> span>
    div>

body>
html>

このスキームは、親コンテナ設定display:tableです.両方のサブコンテナにdisplay:table-cellを設定します.次に幅を固定する幅を与えると、適応したものが適応します.
長所:書き方が簡単;
欠点:ブラウザ互換性:ie 7+;

4つの案が分析されたので、必要に応じて選択して使用することができます.

JDK1.7でAutoCloseableインタフェースの使用について

stderrリダイレクト