Question

我目前正在为客户开发网站，现在我正在制作一个包含不同版本产品的计划部分。问题是我不知道如何以最快的方式将所有按钮40px放在具有最大文本的列下方（没有位置：绝对，隐藏的文本行或带有行高的边距等）。

Here an image from Photoshop (how I want it to be)

And an image of how it actually is in my code (the problem)

我希望你们明白我想说的话，你们可以帮助我！我认为在这种情况下没有必要添加我的代码，但如果我错了请告诉我;）我很好奇你们是如何解决这个问题的！

弗雷德里克

Answer 1

您正面临此问题，因为高度会自动调整。要解决这个问题，请将每个内容放在div标签内，然后调整单个margin-bottom。

Answer 2

我有时会使用Zurb Foundation "Equalizer"，但还有另一种方法可以执行此操作，如下所示。

HTML

将div中的“features”文本和另一个div容器中的“ecommerce”元素包装起来。

<div class="row">
  <div class="medium-12 columns small-text-center">
    <h1>Uitvoeringen</h1>
  </div>
</div>
<div class="row">
  <div class="medium-3 columns">
    <div class="product">
      <div class="features">
        <h4>Finish:</h4>
        <p>Solid gold plating</p>
        <h4>Materials:</h4>
        <p>High grade steel
        </p>
      </div>
      <div class="ecommerce">
        <button>Buy now</button>
        <p>Price per item</p>
        <p>Minimum order size 100 pieces</p>
      </div>
    </div>
  </div>
  <div class="medium-3 columns">
    <div class="product">
      <div class="features">
        <h4>Finish:</h4>
        <p>Solid gold plating</p>
        <h4>Materials:</h4>
        <p>High grade steel
        </p>
      </div>
      <div class="ecommerce">
        <button>Buy now</button>
        <p>Price per item</p>
        <p>Minimum order size 100 pieces</p>
      </div>
    </div>
    </p>
  </div>
  <div class="medium-3 columns">

    <div class="product">
      <div class="features">
        <h4>Finish:</h4>
        <p>Solid gold plating</p>
        <h4>Materials:</h4>
        <p>High grade steel</p>
        <h4>Finish:</h4>
        <p>Solid gold plating</p>
      </div>
      <div class="ecommerce">
        <button>Buy now</button>
        <p>Price per item</p>
        <p>Minimum order size 100 pieces</p>
      </div>
    </div>
    </p>
  </div>
  <div class="medium-3 columns">
    <div class="product">
      <div class="features">
        <h4>Finish:</h4>
        <p>Solid gold plating with silver and platinum edging</p>
        <h4>Materials:</h4>
        <p>High grade steel
        </p>
      </div>
      <div class="ecommerce">
        <button>Buy now</button>
        <p>Price per item</p>
        <p>Minimum order size 100 pieces</p>
      </div>
    </div>

  </div>
</div>

CSS

然后为“features”div容器添加固定高度的大屏幕（在本例中为中画面及以上）的媒体查询。这将允许按钮在大屏幕上排列，在小屏幕上排列基本的堆积块（响应部分）：

@media only screen and (min-width: 40.063em) {
  .features {
    height: 260px;
  }
}

这是my CodePen example

Answer 3

您需要在顶部链接周围的css中声明最小高度。

    .column {
            width: 120px;
            display:block; 
            float: left; 
            margin:20px;
            /*the following is the value you need*/
            min-height:300px;}

查看此链接： http://codepen.io/artchibald/pen/yJkYLW

在相同高度的文本后放置按钮

3 个答案:

HTML

CSS