在填充

Question

我有一个主<div>，在此<div>我有一个产品图片和一个<div>，其中包含有关该产品的详细信息。

此详细信息'div将包含以下内容：产品名称，成分，价格以及另外一个<div>，其中包含1 <input>和1 {{1} }。 问题是，当名称和产品成分的文字比其他文字更多时，其他元素会上下移动。

  

在这种情况下，我该如何保持相同的位置？

了解问题的照片：

HTML＆amp; CSS：

<button>

  .container-custom-product-container{ 
        flex-basis: 23%;
        border-radius: 55px 55px 0 0;
        margin-bottom: 40px;
    }
    .ccpc-product-details-container{
        background-color: white;
        border-radius: 0 0 55px 55px;
    }
    .ccpc-product-details-container h4{
        padding-top: 10px;
    }
    .ccpc-product-details-container h6{
        padding-top: 15px;
        color: grey;
    }
    .ccpc-product-buttons{
        padding: 15px 0 25px 0;
    }
    .ccpc-img-container{
        height: 271px;
    }
    .product-image{
        border-radius: 55px 55px 0 0;
        width: 100%;
        height: 100%;
    }
    .ccpc-product-buttons{
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
    }
    .ccpc-input-container{
        flex-basis: 40%;
    }
    .ccpc-product-buttons{
        flex-basis: 40%;
    }

Answer 1

你可以通过在div中添加一个高度然后说溢出：auto来实现这一点。在这种情况下，您的div将具有相同的尺寸，并且您将能够通过滚动查看大div中的额外文本。它应该是这样的：

{{1}}

Answer 2

实现此目标的最佳方法是使用flexbox https://jsfiddle.net/um0ud2dk/

HTML

<div class="Products">
  <div class="Product">
    <div class="Product__img"></div>
    <div class="Product__details">
      <h2 class="Product__title">Hamburger de porc</h2>
      <p class="Product__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ut sem in tincidunt.</p>
      <h3 class="Product__price">20 lei</h3>
      <div class="Product__buttons">
        <input class="Product__input"/>
        <button type="button" class="Product__button">Adauga in cos</button>
      </div>
    </div>
  </div>
  <div class="Product">
    <div class="Product__img"></div>
    <div class="Product__details">
      <h2 class="Product__title">Hamburger de porc</h2>
      <p class="Product__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies ut sem in tincidunt. Fusce dignissim viverra malesuada. Aliquam eleifend at lorem ut venenatis.</p>
      <h3 class="Product__price">20 lei</h3>
      <div class="Product__buttons">
        <input class="Product__input"/>
        <button type="button" class="Product__button">Adauga in cos</button>
      </div>
    </div>
  </div>
</div>

CSS

body {
  background: #eee;
}

.Products {
  display: flex;
  width: 100%;
  max-width: 600px;
}

.Product {
  display: flex;
  flex-direction: column;
  flex: 1 1 50%;
  margin: 10px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}

.Product__img {
  background: grey;
  width: 100%;
}

.Product__img:before {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.Product__details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 20px;
}

.Product__title {
  text-align: center;
}

.Product__description {
  flex-grow: 1;
  border: 1px solid blue;
}

.Product__price {
  text-align: center;
}

.Product__buttons {
  display: flex;
  margin: -5px;
}

.Product__input,
.Product__button {
  flex: 1 0 auto;
  margin: 5px;
}

Answer 3

我认为你应该尝试将maxheight放到下面的内容中。

carne de porc，chifla，ceapa，rosii，cartofi prajiti

Answer 4

您可以像这样使用flex属性：https://jsfiddle.net/pzhsqcby/3/

CSS：

img {
  width:100%;
  height:100%;
}
.container {
  display:flex;
  flex-direction:row;
}
.card {
 position:relative; 
 background:#000;
 margin:5px;
}
.card-container {
  color:#fff;
}
.card-container h2 {
  margin-top:10px;
  text-align:center;
}
.card-container p {
  text-align:center;
}

HTML：

<div class="container">
 <div class="card">
  <div class="card-container">
      <img src="https://media.wired.com/photos/598e35fb99d76447c4eb1f28/master/pass/phonepicutres-TA.jpg">
      <h2>
      test 
      </h2>
      <p>
      some description blabla
      </p>
  </div>
</div>
<div class="card">
  <div class="card-container">
      <img src="https://media.wired.com/photos/598e35fb99d76447c4eb1f28/master/pass/phonepicutres-TA.jpg">
      <h2>
      test 
      </h2>
      <p>
      some description blablaasadasdasdasdasdasdasdsadasdasd
      blablaasadasdasdasdasdasdasdsadasdasd
      blablaasadasdasdasdasdasdasdsadasdasd
      blablaasadasdasdasdasdasdasdsadasdasd
      </p>
  </div>
 </div>
</div>