如何放置产品卡并使它们看起来合适？

Question

需要定位并让我的产品卡片看起来更像下图所示的卡片 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>

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

Answer 1

您应该使用引导程序的类名来触发其样式，引导程序不需要大量额外的CSS。

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

use a custom font in XML

<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>

Answer 2

在bootstrap列内使用每个产品，就像下面将在原子上正确定位一样，也请参见此处的example。在此示例中，我从产品类中删除了左浮动，并将宽度设为100％

<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="product">

      </div>
    </div>

    <div class="col-lg-4">
      <div class="product">

      </div>
    </div>

    <div class="col-lg-4">
      <div class="product">

      </div>
    </div>
  </div>
</div>

Answer 3

我认为这更像您想要的。。您需要将产品div包装在引导col-12 col-lg-4列中。 （请参见全屏示例，以免包装盒被包裹）。这将向您显示移动设备上的1列布局和台式机等大型设备上的3列布局。

有关原始代码的一些帮助： -您不需要float值 -您的字体大小对于您的盒子来说也太大了。 -另外，请尽量不要为框指定高度和宽度，以使内容合适。

.container .product {
  display: flex;
  margin: 1em 0;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15);
  transition: all .1s ease-in-out;
}

.container .product .img-container {
  flex: 2;
  justify-content: center;
  align-items: center;
  display: flex;
}

.container .product .img-container img {
  width: 100%;
  height: auto;
}

.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;
  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;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row">

    <div class="col-12 col-lg-4">

      <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>

    <div class="col-12 col-lg-4">

      <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>

    <div class="col-12 col-lg-4">

      <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>

  </div>
</div>

Answer 4

使用Bootstrap类，可以通过更简单的代码来获得所需的样式。您可以尝试以下过程：

.container {
  margin-top: 50px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <div class="card">
        <div class="card-body row">
          <img class="card-img-top col-lg-5" src="https://via.placeholder.com/100x100.png?text=Oculus Go" alt="Card image cap">
          <div class=" col-lg-7">
            <h5 class="card-title">Oculus Go</h5>
            <ul class="card-text">
              <li>List Text One</li>
              <li>List Text Two</li>
            </ul>
            <a href="#" class="btn btn-primary">More Info</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <div class="card">
        <div class="card-body row">
          <img class="card-img-top col-lg-5" src="https://via.placeholder.com/100x100.png?text=HTC Vive" alt="Card image cap">
          <div class=" col-lg-7">
            <h5 class="card-title">HTC Vive</h5>
            <ul class="card-text">
              <li>List Text One</li>
              <li>List Text Two</li>
            </ul>
            <a href="#" class="btn btn-primary">More Info</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
      <div class="card">
        <div class="card-body row">
          <img class="card-img-top col-lg-5" src="https://via.placeholder.com/100x100.png?text=Cardboard" alt="Card image cap">
          <div class=" col-lg-7">
            <h5 class="card-title">Cardboard</h5>
            <ul class="card-text">
              <li>List Text One</li>
              <li>List Text Two</li>
            </ul>
            <a href="#" class="btn btn-primary">More Info</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

此设计具有响应能力。尝试全屏和其他尺寸。