相同的容器宽度

Question

所以，我有这两个图像。 HTML结构是这样的：

<div class="buttonContainer">
    <div class="innerButton">
        <img src="...">
        <p> Some text </p>
    </div>
</div>

但正如您所看到的，两个容器都有不同的高度（因为p内容的长度。我在CSS方面不是很有经验，所以欢迎任何帮助。

Answer 1

.innerButton{
  min-height: /*set your height*/;
}

希望这有帮助

Answer 2

1. 将高度属性设置为包含文字的<p>。但如果文字太长，它会溢出<p>

2. 截断您的文字：您可以使用以下代码截断文字。

<p id="greetings"> Hello universe! </p>

<强> CSS

#greetings
{ width: 100px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

然后文字就会变成 Hello univ…

Answer 3

一个很好的问题，我遇到了很多问题。

首先，您有两个选项可以正常运作。去纯CSS路线或使用一些jQuery。后者更容易实现，说实话，开销也不算太差。

我没有选择使用最小高度的原因是我假设您可能希望这个工作响应，其中最小高度可能是一个烦恼。这种方法意味着您永远不需要明确指定高度，在我看来哪个更好。

的 1。纯CSS（使用显示表）

.buttonGrouping.css{
    display: table;
    border-spacing: 20px;
}

.css .buttonContainer{
    display: table-cell;
    margin: 0 20px;
    border: 1px solid #ccc;
}

CSS表格的HTML

<!--Example using CSS-->
<div class="buttonGrouping css">

    <div class="buttonContainer">
            <div class="innerButton">
                    <img src="http://placehold.it/350x150">
                    <p> Some text </p>
            </div>
    </div>

    <div class="buttonContainer">
            <div class="innerButton">
                    <img src="http://placehold.it/350x150">
                    <p> Some text </p>
                    <p> Another para </p>
            </div>
    </div>

</div>

的 2。 jQuery（使用matchHeight.js）

请注意，我在底部的实例中添加了matchHeight插件。该插件可以是found here。

CSS：

.buttonGrouping.jquery{
    clear: both;
}

.jquery .buttonContainer{
    float: left;    
    display: block;
    border: 1px solid #ccc;
    margin: 0 20px;
}

并初始化元素上的脚本......

$(".jquery .buttonContainer").matchHeight();

请注意，脚本中的.jquery只是我为每个示例添加的类，以将它们分开。

Live examples