Удалите заполнение для пустого элемента

Я создаю страницу для предстоящего сайта портала, и у меня есть элемент HTML с некоторым дополнительным контентом. Я бы хотел, чтобы элемент не отображался, если он пуст, но добавление некоторого дополнения к нему заставляет его визуализировать. Как добавить дополнение к контенту, но только если контент присутствует?Удалите заполнение для пустого элемента

.someElement{padding-top: 5px;}

HTML в вопросе:

<div class="someElement">With padded content</div> 
<div class="someElement"><!-- shouldn't render since it has no content --></div>

В принципе, я хотел бы второй элемент, выше, не занимают места. Я тестирую во всех основных браузерах, используя XHTML 1.1 doctype.

источник

2010-01-02 Eric Falsken

100

Вы можете сделать трюк с CSS3 pesudo-класс: пусто

.someElement 
{ 
    // your standard style 
} 
.someElement:empty 
{ 
    display:none; 
}

К сожалению Исследователь интернета не поддерживает эту Feauture еще. Для всех других браузеров это должно быть прекрасным ...

источник

2010-03-17 08:41:20 MindTailor

IE9 также поддерживает это: https://developer.mozilla.org/en-US/docs/CSS/:empty – Town

Я не могу думать о CSS только для этого.

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

источник

2010-01-02 21:01:52

Если это необходимо иметь div.someElement в HTML, лучший CSS/HTML способ сделать это было бы добавить дополнительный div вокруг добавленного контента, который имеет свойство обивка

.someElement > div{padding-top:5px;} 

<div class="someElement"><div>Content</div></div>

В противном случае , сделайте, как говорит Пекка, или взгляните на то, что javascript сделает это за вас.

источник

2010-01-02 21:11:59 munch

В точке, где вы заселить дополнительный div, если нет текста, чтобы положить в него, попробуйте изменить свойство CSS display к none. Согласно this source (и другим), display: none полностью удаляет элемент из документа. Он не занимает места, хотя HTML для него все еще находится в исходном коде.

источник

2010-01-02 21:18:05 DOK

Дайте элементу атрибут id. Затем вы можете использовать Javascript для проверки его свойства innerHTML после загрузки страницы. Если innerHTML имеет длину, равную нулю, вы можете установить для свойства отображения значение none. This page может помочь, если вы не знаете свой javascript.

Это все еще сложный способ играть. Если вы знаете, что элемент не должен отображаться перед тем, как вы будете обслуживать страницу, лучше вообще опустить его. Если вы не хотите опустить элемент, просто спрячьте его, а затем заставьте его скрывать; style="display: none"

источник

2010-01-02 21:18:57 deau

Вам не обязательно обязательно указывать свойство 'id'. Но +1 независимо, я думаю, что JavaScript - это путь сюда. Посмотрите на jQuery, чтобы сделать это проще: http: // jquery.com/ –

Страницы, которые отображаются таким образом, выглядят немного глупо - сначала они загружаются и применяется CSS (рендеринг пространства 5px, как в этом примере), а затем применяются исправления JS, пространство исчезает. – naivists

@naivists - согласен, но вам сложно обойтись, если вы обслуживаете статический HTML. – deau

Дайте пустому элементу другой класс (скажем someHiddenElement), когда вы создаете контент. Затем добавьте someHiddenElement { display: none } в таблицу стилей.

источник

2010-01-02 21:19:15

<style> 
.someElement{padding-top: 5px; display:table;} 
</style> 
<div class="someElement">With padded content</div> 
<div class="someElement"><!-- shouldn't render since it has no content --></div>

Adding display: table; должен сделать трюк.

источник

2012-06-20 08:51:06 vencedor

Не используйте прокладку на контейнере, используйте запас по содержанию. Чем когда нет содержимого, контейнер остается невидимым.

источник

2015-04-07 08:40:40 vito78

Это не работает, у меня есть цвет фона, который все еще отображается. –

Удалите заполнение для пустого элемента

ответ

Смежные вопросы