个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
这是一个非常基本的 Material Design Lite 问题，但这让我发疯了。在以下示例中来自 MDL examples website , 具有 mdl-layout-spacer 类的 div 很好地将其后的元素定位到包含 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 技术，但它似乎只适用于站点标题中的图标。在此图片中查看右侧的徽章图标:
我希望能够在卡片中使用这种技术，但它似乎不起作用。我创建了一个 JSFiddle example使用以下 html。使用 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 类不特定于图标。检查这个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;
}
关于javascript - MDL mdl-layout-spacer 强制内容到下一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42270549/
25
4
0
如何在一行中的两个元素之间使用 Spacer 填充，让一个元素在行的开头，另一个元素在行尾？ Row { Text("Start") Spacer(modifier = Modifie
这是我的 fiddle : http://jsfiddle.net/6yU6N/ 这是我想要完成的模型: 如您所见，我想在页眉和第一个“选择容器”之间添加一个小空间。并在每个拾取容器之间添加一个空间。
我正在使用 reportlab 3.2.0。 SPACER = Spacer(0, 10) buff = BytesIO() doc = SimpleDocTemplate(buff, rightMa
我正在尝试用文本文件的内容填充 textInput 间隔符。需要通过悬停菜单选择上述文本文件，这是我第一次使用。界面很容易设置，但填充文本框的机制比我预期的要复杂。我可能错过了一些非常简单的东西，因为
我已经阅读了很多关于间隔 View 的文章——它们在使用所有这些自动布局方面似乎非常方便。 我理解它们背后的所有概念，这很好......我现在正想和它们一起练习，但在我开始之前，我发现自己陷入了一个更
我正在尝试创建一个个人资料页面，其中底部有一个包含各种选项的表单。但是，当我将 Spacer() 插入 VStack 时，表单不会像它应该做的那样移动到屏幕底部。我尝试用文本替换表单，效果很好，移动到
这个问题是关于我要使用spacer div伪造的最大保证金。 我目前正在与cms一起创建一个网站。 网站上的每一行都有一张图片。用户可以在后端指定百分比值，以为每张图片自定义左边界。 为每个图像设置m
在 Qt 中，如果你希望单个布局中的小部件在物理上分开，你可以在它们之间添加一个间隔符，我们在 GTKmm 中有类似的东西吗？ 这里标签(Gtk::Label m_label;)和按钮(Gtk::Bu
我正在查看 Material.io Basil design study ，我正在尝试弄清楚如何让 Flutter Widget 像 Spacer 一样工作，但有内容。 最佳答案 您可以将 Custo
问题 在低级裸机嵌入式上下文中，我想在内存中创建一个空白空间，在 C++ 结构中并且没有任何名称，以禁止用户访问这样的内存位置. 现在，我通过放置一个丑陋的 uint32_t :96; 来实现它bit
我更喜欢使用 Spacer 在 View 之间添加一些填充，有时您可以将此空间作为填充添加到 View 中。所以我的问题是使用 Spacers 与使用良好的旧填充值相比是否存在任何性能缺陷？ 最佳答案
Bootstrap 4.1 documentation on spacing说我可以扩展 $spacers 变量(由边距和填充类使用)，但它没有解释如何。 任何人都可以分享官方文档的链接吗？如果那不存
如何在 VStack 中获得空间以将按钮固定在底部？ ScrollView { VStack() { Text("Title_1")
我大致有: var body: some View { HStack(alignment: .top) { AvatarView() MessageBubble
如果容器(VStack)与底部黑色 View (如 iPhone 11 Pro Max)不冲突，如何设置 rgb View (100pt)之间的默认间距。 但是 如果没有 100p 高度的空间，则会缩
我一直想知道是否有任何技术可以像 Flex/MXML 一样使用 HTML/CSS。我的意思是，在 MXML 中，HBox、VBox 和 Spacer 是全局使用的，并且它们的行为是可预测的。但是在 H
这是一个非常基本的 Material Design Lite 问题，但这让我发疯了。在以下示例中来自 MDL examples website , 具有 mdl-layout-spacer 类的 di
我试图在我的表格 View Controller 上的表格自定义 View 单元格之间留出空间。例如，对于创建的每个单元格，它都是一个一个地堆叠起来并且没有边距。例如，在 Facebook iPhon
我有一个 ListView ，列表的每一行都包含一个带有一些 TextView 和图像的 HStack，如下所示: HStack{ Text(group.name) Spacer()
我想我可能会遗漏一些东西，有没有办法在 Compose Beta01 中实现“填充其余空间”而无需额外的 Box包裹垫片的元素？ Spacer不幸的是，没有权重修饰符。 Column( mod
我是一名优秀的程序员,十分优秀！