сделать div так же широко, как значок-карта

Question

Как видите, прозрачный блок посередине шире, чем содержащий блок. Я попытался установить влево/вправо, по левому краю/справа и ширину, ни одна из них не изменила внешний вид блока.

HTML код:

<ion-list> 
    <ion-card ion-item no-lines> 
     <img src="http://placehold.it/300x250"/> 
     <button ion-button icon-only clear class="info-icon"> 
     <ion-icon name="information-circle"></ion-icon> 
     </button> 
     <div class="dish-description"> 
     <h3>Descriptions go here. blah blah blah blah blah blah blah blah blah blah blah. blah blah blah blah blah blah blah</h3> 
     </div> 
     <ion-card-content> 
     </ion-card-content> 
    </ion-card> 
</ion-list> 

CSS:

ion-card-content { 
    background: rgb(0, 0, 0); 
    color: #fff; 
} 

.info-icon { 
    position: absolute; 
    top:4%; 
    right:5%; 
} 

.dish-description { 
    position: absolute; 
    top: 20%; 
    height: 200px; 
    width:50%; 
    background-color: rgba(0, 0, 0, 0.7); 
    text-align: center; 
} 

.dish-description h3 { 
    color: #fff; 
    vertical-align: middle; 
} 

Answer 1

Если у вас есть position: absolute, маржа больше не работает. Попробуйте

.dish-description { 
    position: relative; 
    top: 20%; 
    margin: 10px; //adjust as needed 
    height: 200px; 
    max-width:50%; 
    background-color: rgba(0, 0, 0, 0.7); 
    text-align: center; 
} 

Answer 2

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

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

Чтобы добавить на, Есть определенный стиль, который предварительно сгенерированные, как и в примере ,
, что вы положили в «ионе-элемент» будет иметь несколько классов, присоединенных к нему, как мкр-внутрипартийному пункт и т. д.

Итак, чтобы ответить на ваш вопрос, Сначала попробуйте создать основной контейнер. Внутри инерционной карты расположите стиль, который имеет максимальную ширину, которая не превышает родительскую DOM. Пример

<div class="mainContainer"> //put max-width to 100% 
    <ion-card class=""> 
    <div class="dish-description"> //put max-width : 80% 
    <h3>Descriptions go here. bla </h3> 
    </div> 
    <ion-card> 
    </ion-card> 

</div> 

Я надеюсь, что это помогает. :)