首页 > 解决方案 > 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;
}

有没有人能指出我在哪里出错的正确方向?

标签: htmlcssmaterial-designcss-positionmaterial-design-lite

解决方案


有多种方法可以获得您正在寻找的布局。你所追求的一个简单的方法是使用flexbox。下面是一个Material Design Lite布局的最小示例,它带有标题、主要内容和包含您描述的文本和卡片位置的页脚。

您将看到mainhtml 元素设置为display: flexalign-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 验证器来帮助您清理此类语法问题。


推荐阅读