html - HTML 中的 MDL 卡片定位
问题描述
我对 MDL 比较陌生,我正在尝试了解如何在我拥有的一段文本内或旁边放置卡片。我非常接近,但我尝试了很多不同的方法,但我似乎没有得到我想要的结果。
我希望文本在左边(我很满意它的位置),右边有两张宽的 MDL 卡片,一张在另一张上面,与文本一致。
到目前为止,我有:
<body>
<div class="header">
<a class="logo" target="_blank"><img src=".\images\logo.png" border="0" alt="logo" width="90"></a>
<div class="header-left">
<a href="index.html">Home</a>
<a href="wall.html">Wall</a>
<a class="active" href="shop.html">Shop</a>
<a href="blog.html">Blog</a>
<a href="faq.html">FAQ</a>
<div class="header-right">
<a class="active" href="http://instagram.com/woolybox" target="_blank"><img src=".\images\instagram.png" border="0" alt="instagram"img width="20" height="20"></a>
<a href="http://twitter.com/wooly_box" target="_blank"><img src=".\images\twitter.png" border="0" alt="twitter" img width="20" height="20"></a>
</div>
</div>
<p>
<table>
<div class="boxed-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper. Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui ante ac lectus.
</div></table>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
<p>
<div class="col">
<div class="row">
<div class="float-right">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
</div>
</div>
<p>
<footer class="mdl-mega-footer">
<div class="mdl-mega-footer__middle-section">
<div class="mdl-mega-footer__drop-down-section">
<input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
<h1 class="mdl-mega-footer__heading">woolyBox ltd.</h1>
<ul class="mdl-mega-footer__link-list">
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div class="mdl-mega-footer__bottom-section">
<ul class="mdl-mega-footer__link-list">
<li><a href="#">Privacy & Terms</a></li>
</ul>
</div>
</p></div>
</body>
和 CSS:
html, body {
height: 100%;
min-height: 100%;
background-color: #ffffff;
font-family: 'Courier New', Courier, monospace;
}
body {
background: #fafafa;
position: relative;
}
table {
height: 100%;
width: 100%;
background-color: #f4d442;
font-family: 'Courier New', Courier, monospace;
}
td {
height: 100%;
width: 100%;
vertical-align: middle;
text-align: right;
font-family: 'Courier New', Courier, monospace;
}
.header {
overflow: hidden;
background-color: #ffffff;
}
.header a {
float: left;
color: grey;
text-align: center;
padding-top: 16px;
padding: 24px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 18px;
line-height: 25px;
}
.header a.logo {
font-size: 25px;
padding-top: 4px;
font-weight: bold;
}
.header a:hover {
color: black;
}
.header a.active {
color: #f4d442;
}
.header-right {
float: right;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.content {
padding: 16px;
}
.boxed{
width: 50vw;
height: 60vh;
box-align: left;
text-align: justify;
padding: 5%;
background-color: #fff;
margin: 5%;
margin-left: 5%;
}
/* .image {
} */
.boxed-1 {
width: 25%;
height: 100%;
text-align: justify;
padding-top: 10%;
background-color: #fff;
margin: 0 auto;
margin-left: 5%;
margin-right: 80%;
}
.container-wrapper{text-align:center;}
.container-1,
.container-2,
.container-3{width:475px; height:400px; display:inline-block; margin-left:10px; font-family: 'Courier New', Courier, monospace;}
.container-1{background:grey; margin-left:0;}
.container-2{background:grey;}
.container-3{background:grey;}
@media all and (max-width: 650px) {
.container-1{
width:100%;
display:block;
margin:0;
}
.container-2{
width:100%;
display:block;
margin:0;
}
.container-3{
width:100%;
display:block;
margin:0;
}
}
.card-img-top {
height: 200px;
float: left;
margin: 1rem;
position: relative;
justify-content: center;
}
.card {
margin: 0 auto;
float: none;
margin-bottom: 5px;
}
.card-text {
color: grey;
text-align: justify;
padding: 5px;
text-decoration: none;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
line-height: 25px;
}
.demo-card-square.mdl-card {
width: 320px;
height: 320px;
float: left;
margin: 1rem;
position: relative;
justify-content: center;
}
.demo-card-square.mdl-card:hover {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}
.demo-card-square > .mdl-card__title {
color: #fff;
background: #03a9f4;
}
.demo-card-square > .mdl-card__accent {
background: #ff9800;
}
.demo-card-wide.mdl-card {
width: 100%;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('../assets/demos/welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
有没有人能指出我在哪里出错的正确方向?
解决方案
有多种方法可以获得您正在寻找的布局。你所追求的一个简单的方法是使用flexbox。下面是一个Material Design Lite布局的最小示例,它带有标题、主要内容和包含您描述的文本和卡片位置的页脚。
您将看到main
html 元素设置为display: flex
,align-items: center
它并排显示其子元素并在中间垂直对齐(align-items
如果您正在寻找其他垂直对齐方式,您可以尝试不同的选项)。卡片包裹在 a 中div
,以便它们与文本堆叠显示(而不是并排显示)。
.mdl-layout__content main {
padding: 16px;
display: flex;
align-items: center;
}
.mdl-card {
margin: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite layout example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Logo</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__content">
<main>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae.
Aliquam vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem,
et pretium dui ante ac lectus.
</div>
<div class="cards">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
<!-- close cards -->
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">Title</div>
<ul class="mdl-mini-footer__link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy & Terms</a></li>
</ul>
</div>
</footer>
</div>
<!-- close mdl-layout__content -->
</div>
<!-- close mdl-layout -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
在您自己的 html 中,您似乎p
在某些地方使用标签作为中断而没有关闭标签(有一个br
标签更适合您的意图,但我建议您不要这样做,因为您可以获得所需的内容通过在您的 css 中设置适当的margin
和/或值)。padding
您还忘记关闭footer
标签。您可以使用html 验证器来帮助您清理此类语法问题。
推荐阅读
- java - jsp 未在请求的 uri 上呈现
- c# - 同一解决方案上具有不同版本的相同软件包。奇怪的行为
- javascript - Vuejs组件未在v-for上生成列表
- gnuplot - Gnuplot:热图不使用所有数据
- c# - Azure 功能:部署后从 host.json 读取配置
- mapbox - Mapbox Studio:你能在事后改变风格吗?
- ios - UIScrollView - scrollViewDidEndDecelerating 不调用自动滚动
- c# - Selenium c#:执行正确的jquery
- c - 相当于 macOS 上的 fwrite_unlocked?
- mysql - SQL 语句来获取具有特定条件的 ID?