MDL mdl-layout-spacer 强制内容到下一行
MDL mdl-layout-spacer forcing content to next line
这是一个非常基础的 Material Design Lite 问题,但这让我抓狂。在以下来自 MDL examples website 的示例中,div
和 class mdl-layout-spacer
很好地将其后的元素定位在包含 div
的右侧。请注意日历图标在右侧:
<!-- 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
技术,但它似乎只适用于站点 header 中的图标。在这张图片中看到右边的徽章图标是怎样的:
我希望能够在卡片中使用这种技术,但它似乎不起作用。我使用以下 html 创建了一个 JSFiddle example。使用 mdl-layout-spacer
,我希望单词 "today" 位于包含 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>
不,那不是真的。 mdl-layout-spacer
class 不特定于图标。
检查这个 codepen example 我创建的。我使用了文本而不是图标,它工作正常。
在卡片示例中,您使用了样式:
.demo-card-event>.mdl-card__actions {
display: flex;
box-sizing: border-box;
align-items: center;
}
这是将元素向右推的代码。检查此 JsFiddle 我使用相同的 css 来修复您的示例。
已编辑: 您的示例无效,因为您的元素没有 display: flex
css。所以只需将此 css 添加到父级 class:
.mdl-card__supporting_text {
display: flex;
}
这是一个非常基础的 Material Design Lite 问题,但这让我抓狂。在以下来自 MDL examples website 的示例中,div
和 class mdl-layout-spacer
很好地将其后的元素定位在包含 div
的右侧。请注意日历图标在右侧:
<!-- 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
技术,但它似乎只适用于站点 header 中的图标。在这张图片中看到右边的徽章图标是怎样的:
我希望能够在卡片中使用这种技术,但它似乎不起作用。我使用以下 html 创建了一个 JSFiddle example。使用 mdl-layout-spacer
,我希望单词 "today" 位于包含 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>
不,那不是真的。 mdl-layout-spacer
class 不特定于图标。
检查这个 codepen example 我创建的。我使用了文本而不是图标,它工作正常。
在卡片示例中,您使用了样式:
.demo-card-event>.mdl-card__actions {
display: flex;
box-sizing: border-box;
align-items: center;
}
这是将元素向右推的代码。检查此 JsFiddle 我使用相同的 css 来修复您的示例。
已编辑: 您的示例无效,因为您的元素没有 display: flex
css。所以只需将此 css 添加到父级 class:
.mdl-card__supporting_text {
display: flex;
}