我对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;
}
有人能指出我要去哪里的正确方向吗？
答案 0 :(得分：0)
有多种获取所需布局的方法。一个简单的解决方案是使用flexbox。下面是一个Material Design Lite布局的最小示例，该布局带有页眉，主要内容以及包含您所描述的文本和卡片位置的页脚。
您将看到main html元素设置为display: flex，而align-items: center则将其子元素并排显示并在中间垂直对齐（您可以尝试使用其他元素align-items选项，如果您正在寻找其他垂直对齐方式。卡片被包装在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 validator来清理此类语法问题。