Два деления рядом друг с другом, которые составляют до 100% ширины - один появляется под другим? - PullRequest
Новая
       18

Два деления рядом друг с другом, которые составляют до 100% ширины - один появляется под другим?

1 голос
/ 24 ноября 2010

У меня есть контейнер div, который центрируется на 50% ширины страницы.Это имеет отступ 10px и относительное положение.Затем у меня есть div внутри этого, который установлен на ширину 80%, плавающий влево и другого цвета, а также имеет отступ 10px.Есть еще один элемент div, который имеет право плавать вправо и имеет ширину 20%.Ни один из вложенных элементов div не имеет границы или поля.Однако правый отображается под другим только до определенного размера экрана.

Мой HTML / CSS выглядит следующим образом: 

<html>
    <head>
        CSS file included here
    </head>
    <body>
        <div class="page-container">
            <div class="right-col"></div>
            <div class="left-col"></div>
            <div class="clear"></div>
        </div>
    </body>
</html>


.page-container {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.left-col {
    width: 80%;
    float: left;
}

.right-col {
    width: 20%;
    float: right;
}

.clear {
    clear: both;
}

Это ошибкая целую вечность, поэтому я был бы признателен за любую помощь, кто может мне дать.Заранее спасибо.

С уважением,

Ричард

Ответы [ 3 ]

3 голосов
/ 24 ноября 2010

Ваш пример не содержит отступов и выглядит одинаково при любом размере экрана.Если вы добавите отступ к левому элементу div, он будет добавлен к общей ширине, поэтому он получит ширину 80% + 20px.Если вашему контенту в левом div нужно добавить отступ, добавьте в него еще один div с полем в 10px.

0 голосов
/ 24 ноября 2010

У Майкла это есть.

Если вы хотите избежать вставки другого div в div.left-col, вы можете указать все его непосредственные дочерние поля или отступы. 

div.left-col > * {
    margin-left: 10px;
    margin-right: 10px;
}
0 голосов
/ 24 ноября 2010

Попробуйте указать ширину почти 100%, например, 19,99% или 79,99%.

...