Question

我正在为一个设计课程制作一个网站，而且我很难放置像我希望的那样的东西。

我希望同一行上的所有盒子都有相同的高度，但我不想要一个固定的高度，因为该网站将来会有所回应。如果我可以将盒子的内容垂直居中，我也会喜欢它。

以下是它应该是什么样的截图： Desired result

这就是它的实际情况： Desired result

我尝试了很多东西，但我无法想出一个很好的方法。

以下是我当前代码的链接：http://cgagnier.ca/gived/design/

非常感谢

Answer 1

这将解决您的问题：

#premium figure {min-height: 203px;}

它具有移动响应能力。

另一个解决方案是使用<table>布局，但在我看来，坚持上面的解决方案。

Answer 2

对于相等高度的列，您还可以在这里查看（使用伪元素）：

http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

或者另一种方法是探索display：table规则，这样你就可以将框定义为table-cells。这可能也会解决垂直对齐问题（只是在table-cell元素上使用vertical-align属性）。

-

对于垂直对齐本身，我有时会利用内联块垂直对齐属性。

因此，将每个内部块定义为内联块并使用vertical-align：middle（因此它们彼此对齐）。然后使用高度为100％的伪鬼元素将其他元素与其对齐。

我也有一个sass mixin：

//to be placed on a pseudo :after/before
@mixin vertical_pivot{
  content:"";
  width: 1px;
  height: 100%;
  display:inline-block;
  vertical-align: middle;
}

这里也解释了最后一种技术（见MichałCzernow的鬼元素部分）：

http://css-tricks.com/centering-in-the-unknown/

Answer 3

您只需为这些图像指定最大高度

#premium figure img {
    max-width: 45%;
    display: inline-block;
    max-height: 149px;
    min-height: 149px;
}

Answer 4

在div周围放一个div给它一个类，比如container，然后给它一个min-height和max-height。

DIV：

<div class='container'>
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

的CSS：

.container{
    min-height: 200px;
    max-height: 200px;
}

Answer 5

将您的两个数字包裹在弹性框div

中

<div style="
        display: flex;
    "><figure class="grille_6">
                <img alt="DLC" src="img/p_dlc.png">
                <figcaption>
                    <h1>Tous les DLC gratuits</h1>
                    <p>Obtenez gratuitement tous les DLC de Bugfield. Vous pourrez profiter de tous ces nouveaux bug une semaine en avance!</p>
                </figcaption>
            </figure>

            <figure class="grille_6">
                <img alt="Mallette" src="img/p_mallette.png">
                <figcaption>
                    <h1>Participation au banquier™</h1>
                    <p>Lorsque vous achetez le Premium™, vous êtes automatiquement inscrit pour faire partie des spectateur du Banquier™</p>
                </figcaption>
            </figure>
      </div>
      <div style="
        display: flex;
    ">
            <figure class="grille_6">
                <img alt="Couteau" src="img/p_couteau.png">
                <figcaption>
                    <h1>Nouvelles armes exclusives</h1>
                    <p>Obtenez des nouvelles armes exclusives tel que le couteau bipod qui comprend une lampe tactique et une mire optique x10</p>
                </figcaption>
            </figure>

            <figure class="grille_6">
                <img alt="Priorité réduite" src="img/p_serveur.png">
                <figcaption>
                    <h1>Priorité en file réduite</h1>
                    <p>Lorsque vous rejoindrez un serveur, vous serez placé dans une file spéciale à priorité réduite. Tous les autres joueurs passeront avant vous.</p>
                </figcaption>
            </figure>
      </div>

Answer 6

您还可以创建容器并将2列用作表格单元格。这是一个非常原始的演示，但我希望你能明白这一点。 Fiddle

<强> CSS：

#container {
    display: table;
}
#content {
    display: table-cell;
    vertical-align: top;
    background: #000; 
    color: #fff;
    padding: 0 10px;
}
#sidebar {
    display: table-cell;
    vertical-align: top;
    background: #cecece;
    padding-right: 10px;
}

<强> HTML

<div id="container">

    <div id="sidebar">
        <p>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br></p>
    </div>

    <div id="content">
        <p>Main content</p>
    </div>

</div>

div中的中心元素

6 个答案: