2 cols, 1 фиксированный, другой жидкости?(Дилемма) - PullRequest
Новая
       30

2 cols, 1 фиксированный, другой жидкости?(Дилемма)

0 голосов
/ 18 марта 2012

Может кто-нибудь объяснить мне этот код, потому что он, кажется, превосходит мою логику? 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
<style type="text/css">
    body{
        background-color:#000;
        padding: 0;
        margin: 0;
    }
    #main{
        width:70%;
        min-width:300px;
        height:500px;
    }

    #colWr{
        width:100%;
        height:500px;
        float:left;
    }

    #col{
        height:inherit;
        background-color:#900;
        margin-left:200px;  
    }

    #left{
        height:inherit;
        background-color:#9C3;
        float:left;
        width: 200px;
        margin-left: -100%;
    }

</style>
</head>
<body>
<center>
<div id="main">
    <div id="colWr">
        <div id="col"></div>
    </div>
    <div id="left"></div>
</div>

</center>
</body>
</html>

Мои вопросы основаны на том факте, что #left содержит атрибут margin-left: -100px, позициюDiv внутри основного div предполагают, что левый столбец скорее будет правым столбцом, и почему столбец «col» смещен влево внутри div «colWr»?

Для макета css 1_fixed-1_liquid,код довольно сложный.

1 Ответ

2 голосов
/ 18 марта 2012

Порядок div не имеет значения, так как colWr имеет ширину 100%, что означает, что все, что всплыло после того, как оно появится в новой строке, в любом случае, если левый столбец будет первым, это вызовет colWrстолбец на новую строку, и это должно было бы дать отрицательный запас.left div имеет отрицательную маржу в 100%, что возвращает его к вершине colWr.

Что касается того, почему страница была выложена таким образом, я понятия не имею, того же эффекта можно достичь, просто поместив left рядом с div col и удалив div colWr(не приносит никакого вреда, но это не имеет смысла).

Вы также должны отметить, что тег center в HTML устарел, и я рекомендую вам указывать центр div, указав его в css margin: auto.В коде также отсутствует объявление DOCTYPE , которое требуется для запуска режима стандартов в большинстве браузеров - вы можете найти больше информации о режимах браузера здесь .

Я подозреваю, чтокод, который вы написали перед датой выпуска HTML 4.01 .Он будет работать в большинстве браузеров из-за их устаревшей поддержки, но это не значит, что он работает хорошо, я бы не стал его использовать.Однако я бы использовал это: 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
        <style type="text/css">
            body{
                background-color:#000;
                padding: 0;
                margin: 0;
            }
            #main{
                width:70%;
                min-width:300px;
                height:500px;
                margin: auto;
            }

            #col{
                height:inherit;
                background-color:#900;
                margin-left:200px;  
            }

            #left{
                height:inherit;
                background-color:#9C3;
                float:left;
                width: 200px;
            }
        </style>
    </head>
    <body>
       <div id="main">
            <div id="left"></div>
            <div id="col"></div>
       </div>
    </body>
</html>
...