Поле плавающего списка в CSS

У меня есть div шириной 320px. Я перемещаю элементы списка слева, каждый шириной 100 пикселей. Затем я хочу иметь правое поле в 10 пикселей справа от каждого элемента списка. Все остальные поля и отступы удалены.

Итак, я в основном хочу 3 элемента списка в строке, прежде чем он перейдет на следующую строку. Но поскольку на 3-м элементе (т.е. на всех элементах) есть отступ справа, он переходит на следующую строку (поэтому только 2 элемента в строке).

Есть ли способ иметь 3 элемента в строке в этом экземпляре без создания дополнительных классов или использования сценариев.


html css html-lists css-float
person Community    schedule 10.07.2009    source источник
comment
Какое бы решение вы ни выбрали, помните об ошибке IE6 с плавающей маржой.   -  person deceze♦    schedule 10.07.2009
comment
Между прочим, самый простой способ избежать ошибки с плавающими полями в IE6 — это использовать padding вместо margin.   -  person Zarel    schedule 10.07.2009

Ответы (6)


arrow_upward
4
arrow_downward

Используя селекторы CSS3:

ul:nth-child(3n)   { margin-left: 0px; ... }
ul:nth-child(3n+1) { margin-left: 10px; ... }
ul:nth-child(3n+2) { margin-left: 10px; ... }

Может быть нецелесообразно из-за отсутствия поддержки CSS3.

person Ben S    schedule 10.07.2009
comment
Обратите внимание, что это не поддерживается Firefox 3 или IE 7. Это поддерживается только браузерами на основе Webkit (Safari/Chrome) и Opera. В остальном это довольно умное решение. - person Zarel; 10.07.2009
comment
Firefox 3.5 также поддерживает это. IE не поддерживает ни в одной версии. - person Ben S; 10.07.2009
comment
Не могли бы вы также ПРОСТО сделать margin: 0 10px для :nth-child(3n+2) ? jsfiddle.net/f17Lees9 - person deebs; 29.06.2016

arrow_upward
2
arrow_downward

Должен ли ваш div быть шириной 320 пикселей? Самым простым решением было бы сделать div шириной 330px. Если его контейнер имеет размер всего 320 пикселей, вы можете использовать что-то вроде margin-right: -10px.

person Zarel    schedule 10.07.2009
comment
Я согласен, проще всего, если он расширит контейнер на 10 пикселей, а затем сделает отрицательную маржу, как вы сказали. - person Darko Z; 10.07.2009
comment
если для визуальной согласованности он не хочет, чтобы правый элемент списка обнимал правую сторону, как левый элемент списка слева - person deebs; 29.06.2016

arrow_upward
0
arrow_downward

Насколько я знаю, невозможно без использования классов определить последний элемент в каждой строке (что вы можете легко сделать, если сгенерируете список с помощью языка сценариев). В противном случае вы можете разделить левое поле на 20px / 3 = 6px или увеличить ширину <div> до 330 пикселей, чтобы вместить дополнительное поле.

person Alan Haggai Alavi    schedule 10.07.2009

arrow_upward
0
arrow_downward

Вот вариант, который работает в IE6 и выше (возможно, в IE5+ — я не проверял).

Обратите внимание, что это будет работать только для 3 предметов. К 4-му элементу будет применено левое поле в 10 пикселей, а 6-й элемент будет перемещен в следующую строку в данный момент. Я уверен, что кто-то умнее меня может понять это.

Я использую выражения (которые, я думаю, являются сценариями, но могут сработать для вас) и условные комментарии, чтобы получить первый дочерний элемент в IE6. Наслаждаться:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Columns test</title>
    <style type="text/css" media="screen">
        #container {
            border: 1px solid red;
            width: 320px;
            overflow: hidden;
        }
        .column {
            margin-left: 10px;
            width: 100px;
            float: left;
            background: #ccc;
        }
        .column:first-child {
            margin-left: 0;
        }
    </style>
    <!--[if IE 6]>
    <style type="text/css" media="screen">
        .column {
            margin-left: expression((this===this.parentNode.childNodes[0])?"0":"10px");
            display: inline;
        }
    </style>
    <![endif]-->
</head>
<body>
    <div id="container">
        <div class="column">
            <p>Column 1</p>
        </div>
        <div class="column">
            <p>Column 2</p>
        </div>
        <div class="column">
            <p>Column 3</p>
        </div>
    </div>
</body>
</html>
person Jason Berry    schedule 10.07.2009
comment
Читайте внимательнее: здесь больше одной строки. Добавьте столбец 4, и вы увидите, почему ваш код не работает. - person Zarel; 10.07.2009
comment
В то время, когда вы опубликовали свой ответ, мой ответ уже предоставил практичное кросс-браузерное решение, а Ben S предоставил более красивое решение, для которого требуется браузер, совместимый с CSS3, оба из которых работают более чем с 3 элементами. - person Zarel; 10.07.2009
comment
Я столкнулся с проблемами с отрицательными полями в IE6 (например, с исчезновением границ, когда контейнер является пределом), и ответ Бена С. не правдоподобен для большинства браузеров в дикой природе. Конечно, я бы предпочел более простой и красивый ответ, но иногда это невозможно с учетом существующих ограничений. Я предложил альтернативу, если он не сможет использовать более красивые варианты. - person Jason Berry; 10.07.2009

arrow_upward
0
arrow_downward

В wordpress это можно сделать, добавив пару битов в "цикл wordpress"... решение здесь: http://wordpress.org/support/topic/368646

person wes    schedule 11.07.2010

arrow_upward
-2
arrow_downward 

.divFloat { margin-left: 10px; ...}
.divFloat:First {margin-left: 0; ...}

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

person xandy    schedule 10.07.2009
comment
Не поддерживается IE 6, если это имеет значение. - person Ben S; 10.07.2009
comment
Это будет работать только в том случае, если у него есть только одна строка. В противном случае вам нужно сделать что-то вроде того, что каждый третий div имеет margin-left:0, а CSS для этого недостаточно сложен. - person Zarel; 10.07.2009
comment
Я никогда не слышал о псевдоклассе :First. Вы думаете о :first-ребенке, возможно? Тем не менее, это не будет означать начало каждой строки, и это не будет работать в IE6. - person deceze♦; 10.07.2009