MDL mdl-layout-spacer форсирует содержимое до следующей строки

Это довольно простой вопрос о материальном дизайне Lite, но это сводило меня с ума. В следующем примере из MDL examples websitediv с классом mdl-layout-spacer красиво позиционирует элементы после него справа от содержащего div. Обратите внимание на значок календаря находится справа:MDL mdl-layout-spacer форсирует содержимое до следующей строки

<!-- Event card --> 
<style> 
    .demo-card-event.mdl-card { 
     width: 256px; 
     height: 256px; 
     background: #3E4EB8; 
    } 

    .demo-card-event>.mdl-card__actions { 
     border-color: rgba(255, 255, 255, 0.2); 
    } 

    .demo-card-event>.mdl-card__title { 
     align-items: flex-start; 
    } 

    .demo-card-event>.mdl-card__title>h4 { 
     margin-top: 0; 
    } 

    .demo-card-event>.mdl-card__actions { 
     display: flex; 
     box-sizing: border-box; 
     align-items: center; 
    } 

    .demo-card-event>.mdl-card__actions>.material-icons { 
     padding-right: 10px; 
    } 

    .demo-card-event>.mdl-card__title, 
    .demo-card-event>.mdl-card__actions, 
    .demo-card-event>.mdl-card__actions>.mdl-button { 
     color: #fff; 
    } 
</style> 
<div class="demo-card-event mdl-card mdl-shadow--2dp"> 
    <div class="mdl-card__title mdl-card--expand"> 
     <h4> Featured event:<br> May 24, 2016<br> 7-11pm </h4> 
    </div> 
    <div class="mdl-card__actions mdl-card--border"> <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
     Add to Calendar 
    </a> 
     <div class="mdl-layout-spacer"></div> <i class="material-icons">event</i> </div> 
</div>

Теперь к этой проблеме. Я пробовал технику mdl-layout-spacer в нескольких разных ситуациях на своем сайте, но, похоже, она работает только для значков в заголовке сайта. Смотрите в этой картинке, как значок значок находится справа:

Я хочу, чтобы иметь возможность использовать эту технику в картах, но это не похоже на работу. Я создал JSFiddle example, используя следующий html. Используя mdl-layout-spacer, я ожидал бы, что слово «сегодня» будет расположено справа от содержащего div, но, как вы можете видеть, оно переходит к следующей строке.

Я что-то упустил? Должен ли я использовать разделитель, как предполагалось, или мне нужно отказаться от этой амбиции?

<body> 
    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> 
     <main class="mdl-layout__content"> 
      <div class="mdl-grid"> 
       <div class="full-width-card hover-card mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-card mdl-shadow--2dp" style="min-height:100px;"> 
        <div class="mdl-card__supporting_text"> 
         <a class="no-decoration" href="#"> <span style="display:inline-block;"> 
        username 
        </span> <span style="display:inline-block;"> 
        <i class="material-icons">acct_icon</i> 
        </span> </a> 
         <!-- spacer --> 
         <div class="mdl-layout-spacer"></div> 
         <!-- --><span style="display:inline-block;">today</span> </div> 
       </div> 
      </div> 
     </main> 
    </div> 
</body>

источник

2017-02-16 jeffery_the_wind

Нет, это не так. mdl-layout-spacer класс не относится к значкам. Проверьте это codepen example Я создал. Я использовал текст вместо значка, и он работает нормально.

В примере карты, вы использовали стили:

.demo-card-event>.mdl-card__actions { 
    display: flex; 
    box-sizing: border-box; 
    align-items: center; 
}

Это код, который толкает элемент вправо. Оформить заказ JsFiddle Я использовал тот же css, чтобы исправить ваш пример.

Отредактировано: Ваш пример не работает, потому что у вашего элемента нет display: flex css. Поэтому просто добавьте этот css в родительский класс:

.mdl-card__supporting_text { 
    display: flex; 
}

источник

2017-02-21 08:58:56

MDL mdl-layout-spacer форсирует содержимое до следующей строки

ответ

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