<ul> <li>с ящиками / делениями

Question

Я создал блок, и теперь я хочу повторить его четыре раза, сделать 4 блока горизонтально выровненными, но не хочу вставлять 4 раза код, в любом случае сделать это с тегом <li>?

HTML:

<div id="promos">

    <div class="promoinside">promo</div>

</div>

CSS:

#promogrid{
    width:auto;
    height: auto;
    background-color: #ffffff;
}

#promos{
    position: relative;
    margin: 10px 5px 10px 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:225px;
    height:160px;
    background-color: #fff;
    border-style:solid;
    border-width:1px;
    border-color: #cacaca;
    -moz-box-shadow: 0 0 4px #dadada;
    -webkit-box-shadow: 0 0 4px#dadada;
    box-shadow: 0 0 3px #dadada;
}

.promoinside{
    position: absolute;
    margin: 3px 4px 4px 3px;
    width: 219px;
    height: 154px;
    background: #f5f5f5;
    background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));     background: -moz-linear-gradient(top, #fafafa, #eeeeee); 
}

.promoinside:hover{
    background: #fbfbfb;
}

Answer 1

Вы определенно можете сделать это, используя li.Div действительны внутри тегов li (см. Разрешено ли div внутри списка? ).Вам гораздо лучше писать код для каждого блока вручную, поскольку он требует минимального объема кода по сравнению с их динамическим созданием.(Если ящики сильно меняются, вам лучше сделать их динамичными.)

<ul id="promos">
    <li><div class="promoinside">promo</div></li>
</ul>

ul#promos {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

ul#promos li {
    display: inline;
}

Answer 2

Ну, до сих пор я не слышал о таких вещах, связанных с CSS.

Как насчет данных внутри тегов?Вы можете повторить это, если вы используете какую-то CMS или динамически рисуете div.

Я думаю, что логично, что вы хотите поместить разные данные внутрь.Даже если вы реплицируете элементы div - вы должны помещать данные в каждый из них.

Полагаю, лучший способ сделать это - динамически поддерживать ваш HTML.