时间戳

首页 > 解决方案 > 如何定位产品卡片并使其看起来合适？

html - 如何定位产品卡片并使其看起来合适？

问题描述

需要定位并使我的产品卡看起来更像下图所示的那些 https://prnt.sc/mip9eb

我试过使用float:left;，但它只使 2 个产品卡的位置正确。

这些是使用引导程序制作的

.container {
    width: 100%;
    height: 100%;
  }
  .container .product {
    width: 390px;
    height: 130px;
    display: flex;
    margin: 1em 0;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15);
    transition: all .1s ease-in-out;
    float: left;
  }
  .container .product .img-container {
    flex: 2;
  }
  .container .product .img-container img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
  .container .product .product-info {
    background: #fff;
    flex: 3;
  }
  .container .product .product-info .product-content {
    padding: .2em 0 .2em 1em;
  }
  .container .product .product-info .product-content h1 {
    font-size: 1.5em;
  }
  .container .product .product-info .product-content p {
    color: #636363;
    font-size: .9em;
    font-weight: bold;
    width: 90%;
  }
  .container .product .product-info .product-content ul li {
    color: #636363;
    font-size: 9em;
    margin-left: 0;
  }
  .container .product .product-info .product-content .buttons {
    padding-top: .4em;
  }
  .container .product .product-info .product-content .buttons .button {
    text-decoration: none;
    color: #5e5e5e;
    font-weight: bold;
    padding: .3em .65em;
    border-radius: 2.3px;
    transition: all .1s ease-in-out;
  }
  .container .product .product-info .product-content .buttons .buy {
    border: 1px #5e5e5e solid;
  }
<div class="container">

          <div class="product">
            <div class="img-container">
              <img src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg">
            </div>
            <div class="product-info">
              <div class="product-content">
                <h1>Oculus Go</h1>
                <ul>
                  <li>Lorem ipsum dolor sit ametconsectetu.</li>

                  <li>adipisicing elit dlanditiis quis ip.</li>
                </ul>
                <div class="buttons">
                  <a class="button buy" href="#">More Info</a>
                </div>
              </div>
            </div>
          </div>
</div>

有人可以指导我如何使单个产品卡看起来更像图像中的产品卡，以及如何将所有 3 个产品卡连续放置

标签： htmlcss

解决方案

你应该使用 bootstrap 他们的类名来触发他们的样式，bootstap 不需要很多额外的 css。

您可以尝试将此作为项目的开始：

Boostrap 卡文档

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Oculus Go</h5>
      <p class="card-text">Lorem ipsum dolor sit ametconsectetu.</p>
      <p class="card-text"><small class="text-muted">adipisicing elit dlanditiis quis ip.</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Oculus Go</h5>
      <p class="card-text">Lorem ipsum dolor sit ametconsectetu.</p>
      <p class="card-text"><small class="text-muted">adipisicing elit dlanditiis quis ip.</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Oculus Go</h5>
      <p class="card-text">Lorem ipsum dolor sit ametconsectetu.</p>
      <p class="card-text"><small class="text-muted">adipisicing elit dlanditiis quis ip.</small></p>
    </div>
  </div>
</div>

推荐阅读