CSS позиционирование (отступ / отступ) с ограничением разметки - PullRequest
Новая
       6

CSS позиционирование (отступ / отступ) с ограничением разметки

2 голосов
/ 13 августа 2010

У меня есть два родственных элемента, сидящие друг под другом, оба содержатся в одном родительском элементе.

Требование состоит в том, что элементам нужно определенное количество пространства между ними, скажем, 20px, но расстояние между нимивнутренние div и родительский div должны быть одинаковыми со всех сторон (вверху, справа, внизу, слева), в этом случае 0px.

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

Что может быть хорошим способом решения этой проблемы с помощью CSS (без JavaScript), в перекрестномспособ совместимый с браузером?

Спасибо!

Ответы [ 4 ]

2 голосов
/ 13 августа 2010 
#parentdiv div {
    margin-top: 20px;
}

#parentdiv div:first-child {
    margin-top: 0;
}

должен это сделать. Кроме того, вы можете попробовать 

#parentdiv div + div {
    margin-top: 20px;
}

Какое решение использовать, зависит от поддержки браузерами псевдокласса :first-child или соседнего селектора +. Любой современный браузер (т.е. дисконтирующий IE6) должен поддерживать оба.

0 голосов
/ 13 августа 2010

Два дива сидят друг под другом? Вы имеете в виду, что они сложены вертикально друг на друга? Margin-top будет делать это до тех пор, пока у вас нет отступа для родительского div.

Попробуйте этот пример. 

<html>
<head>
<style>
div.parent {
    background-color: #AAA;
}
div.child {
    background-color: #CCC;
    margin-top: 20px;
}
</style>
</head>
<body>
<div class="parent">
    <div class="child">&nbsp;</div>
    <div class="child">&nbsp;</div>
</div>
</body>
</html>

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

Если они рядом и плавают, это другая история, margin-left не работает так же, как margin-top. Возможно, вы сможете использовать margin-right в обоих div, но зафиксируйте ширину родительского элемента и установите overflow равным скрытому, чтобы обрезать расширенное поле, но я не уверен в совместимости с такими вещами.

Вы абсолютно уверены, что у вас нет возможности различить два div? Если вы найдете способ обойти это ограничение, то вам многое помогут.

0 голосов
/ 13 августа 2010

Как уже говорили другие, вы не можете использовать чистый подход CSS, который будет работать в IE6.Однако, почему бы не использовать минимизированную базовую инфраструктуру jQuery - без пользовательского интерфейса она будет крошечной - и тогда вы можете вызвать первого потомка и применить к нему поле:уже применены маржинальная вершина: 20px;в вашем CSS, теперь вы удаляете его только от первого ребенка.Я знаю, что вы сказали, что не хотите подход на основе JavaScript, но у вас нет большого выбора, если вы не готовы реинжинировать ie6 и воскресить его для нас?

Надеюсь, это кому-нибудь поможет

0 голосов
/ 13 августа 2010

Вы могли бы вставить еще один div между ними и сделать его высоту 20px? или помещает первый внутренний div в новый div и затем делает нижнее поле новых div'ов 20px приемлемым решением?

...