как равномерно распределить слои внутри слоя контейнера - PullRequest
Новая
       5

как равномерно распределить слои внутри слоя контейнера

0 голосов
/ 26 ноября 2009

У меня есть слой контейнера шириной 850 пикселей. Внутри этого у меня есть 4 слоя, отображаемые в виде встроенных блоков, плавающих влево, каждый из которых имеет высоту 100 пикселей и ширину 200 пикселей.

Как я могу расположить их так, чтобы внешние располагались по краям контейнера div, но были равномерно распределены внутри?

CSS 

#content {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
}
#featured {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    background-color: #09F;
}

HTML 

<div id=content>
    <div id=featured></div>
    <div id=featured></div>
    <div id=featured></div>
    <div id=featured></div>
</div>

Ответы [ 4 ]

2 голосов
/ 26 ноября 2009

На самом деле это не сработает, потому что у вас есть контейнер шириной 850 пикселей и вы пытаетесь распределить 4 контейнера шириной 200 пикселей с тремя желобами между ними. 4 * 200 = 800, так что у вас есть разброс 50px, в котором разделить 3 желоба 50/3 - это 16,6666ish, что не сработает для пикселей.

Следующее работает, но я не знаю, насколько это полезно для вас. 

#content {
    width: 848px;
    margin-right: auto;
    margin-left: auto;
    background: #666;
    overflow: hidden;
}
#featured {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 16px;
    margin-top: 10px;
    background-color: #09F;
}
#featured.first { margin-left: 0px;}

<div id=content>
    <div id=featured class="first"></div>
    <div id=featured></div>
    <div id=featured></div>
    <div id=featured></div>
</div>
0 голосов
/ 26 ноября 2009

Может быть, не то, что вам нужно, но если поддержка IE6 не важна, псевдо-селекторы идеально подходят для этого и избегают любых выдумок HTML (протестировано в IE7, FF3.5):

CSS: 

    #content {
            width: 848px;
            margin: 0 auto;
            overflow: auto;
    }
    .featured {
            height: 100px;
            width: 200px;
            float: left;
            margin-left: 16px;
            margin-top: 10px;
            background-color: #09F;
    }
    .featured:first-child {
            margin-left: 0;
    }

HTML: 

<div id="content">
        <div class="featured"></div>
        <div class="featured"></div>
        <div class="featured"></div>
        <div class="featured"></div>
</div>
0 голосов
/ 26 ноября 2009

Есть несколько способов сделать это. Одно кросс-браузерное решение, которое я нашел, - это использовать дополнительный div-упаковщик и проявить творческий подход с его истинными размерами и отрицательными полями. 

<div id="content">
    <div class="kludge">
        <div class="featured"></div>
        <div class="featured"></div>
        <div class="featured"></div>
        <div class="featured"></div>
    </div>
</div>

Я изменил id=featured на имя класса, потому что идентификаторы должны быть уникальными, если вы хотите, чтобы ваш HTML был действительным.

CSS: 

#content {
    width: 850px;
    margin: 0 auto; /* short-hand for margin, first value is top+bottom, second value is left+right */
    overflow: hidden; /* not actually necessary but will make #container contain the floated items */
}
.kludge {
    width: 900px; /* create room for the right hand margin of last item */
    margin-right: -50px;
}
.featured {
    display: block; /* inline-block not necessary for floated elements */
    height: 100px;
    width: 200px;
    float: left;
    margin: 0 10px;
    background-color: #09F;
}
0 голосов
/ 26 ноября 2009

Я думаю, что самый простой способ: 

<style>
#content {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
border:1px solid #000
}
#featured1 {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 0px;
    margin-top: 10px;
    background-color: #09F;
}
#featured2 {
    display: inline-block;
    height: 100px;
    width: 200px;
    float: left;
    margin-left: 16px;
     margin-top: 10px;
    background-color: #09F;
}
</style>
</head>

<body>

<div id=content>
    <div id=featured1></div>
    <div id=featured2></div>
    <div id=featured2></div>
    <div id=featured2></div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...