теги div не выровнены должным образом - PullRequest
Новая
       17

теги div не выровнены должным образом

0 голосов
/ 17 октября 2011

У меня странная проблема с тегами div, на самом деле эти теги div выровнены и сгруппированы в одном контейнере, но проблема, которая действительно глупа, - мой код 

<html>
<head>
<style>
    body {
        padding: 0 2%;
    }
    #footer {
     width: 100 %;
        clear: both;
        border: 1px solid #CCC;
    }
    #footer .col_one {
        float: left;
        width: 25%;
        border: 1px solid #CCC;
    }
    #footer .col_two {
        float: left;
        width: 25%;
        border: 1px solid #CCC;
    }
    #footer .col_three {
        float: left;
        width: 24%;
        border: 1px solid #CCC;
    }
    #footer .col_four {
        float: left;
        width: 25%;
        border: 1px solid #CCC;
    }
</style>
</head>
<body>
    <div id="footer">
        <div class="col_one">
            &nbsp; something here
        </div>
        <div class="col_two">
            &nbsp; something here
        </div>
        <div class="col_three">
            &nbsp; something here
        </div>
        <div class="col_four">
            &nbsp; something here
        </div>
        <div style="clear: both">
        </div>
    </div>
</body>
</html>

Теперь в #footer .col_three, когда я делаю ширину в 24%, они отображают все поля в правильном порядке, но затем я делаю это на 25%, последний идет чуть ниже первого поля, почему это так? Общий контейнер нижнего колонтитула составляет 100%, и есть четыре блока div, каждая из которых имеет ширину 25%, и я ошибаюсь, надеюсь, вы понимаете и извините за плохой английский.

Ответы [ 2 ]

3 голосов
/ 17 октября 2011

Это потому, что ширина, которую вы установили, это ширина содержимого, исключая отступы, поля и границы.Таким образом, общая ширина составляет 100% + 8px (для границ 1px на каждой стороне 4 деления).Поэтому он не подходит.

Вы можете решить эту проблему, добавив в div дополнительные div.Внешний div у вас составляет 25% ширины без границВнутренний div, вы можете задать границу, но без явной ширины, поэтому он заполнит своего родителя:

http://jsfiddle.net/GolezTrol/fm7LV/1/

Я позволил себе немного изменить селекторы, поместив отдельныйклассы на этих div: col one вместо col_one.Таким образом, вы можете использовать селектор .col для всех столбцов и селектор .col.one в случае, если вам нужно стилизовать определенный столбец.:)

0 голосов
/ 17 октября 2011

Уберите границу, и они должны работать. Браузер рассчитывает количество пикселей, которое должно быть по ширине для каждого деления, исходя из процентов.Когда вы добавляете дополнительные пиксели (с рамкой), общая ширина элементов div больше, чем ширина окна, и их нужно сместить вниз 

#footer{
    width: 100 %;
    clear: both;
}
#footer .col_one,.col_two,.col_three,.col_four{
    width:25%;
    float:left;
}
...