Question

我正在创建我的第一个网页，我有3个框，图像和文字作为对象。无论内容如何，如何使盒子的高度相同？

css等新手，请帮助。

我尝试过填充，边距等但没有。我的代码如下：

     <!------------------------------   Three Small Span Boxes  --------------------------->
<div class="container-full-width" id="boxes_lite_section">
    <div class="container" >
        <div class="container-fluid" >

            <!-- Start of markup for boxes lite element -->
            <div id="widget_boxes_container" class="row-fluid" >
                <div class="boxes">
                    <div class="box span4">
                        <p>
                            ***
                        </p>
                        <a  class="box-link">
                            <img class="box-image" src=".jpg" />
                        </a>
                        <p align="justify" style="margin-top:20px">
                            content here funding.
                        </p>
                    </div>
                    <!--end box1-->

                    <div class="box span4">
                        <p>
                            ***
                        </p>
                        <a  class="box-link">
                            <img class="box-image" src=".jpg" />
                        </a>
                        <p align="justify" style="margin-top:20px">
                           content here
                        </p>
                    </div>
                    <!--end box2-->

                    <div class="box span4">
                        <p>
                            ***
                        </p>
                        <a class="box-link">
                            <img class="box-image" src=".jpg" />
                        </a>
                        <p align="justify">
                            content here
                        </p>
                    </div>
                    <!--end box3-->
                </div>
                <!-- end boxes -->
            </div><!-- end row-fluid -->
            <!-- End of markup for boxes lite element -->
        </div>
        <!-- .container-fluid-->
    </div>
    <!-- .container -->
</div>
<!-----------------------------  End Three Small Span Boxes  ------------------------->

Answer 1

为元素设置height时，无论内容如何，都会以此显示。

BUT 如果内容变得高于身高，结果可能会非常难看。
所以，最好在你的情况下设置overflow:auto，这将在内容较高时保存盒子高度......

div.box {
  width: 350px; /*for example*/
  height:300px; /*for example*/
  background: blue; /*for example*/
  color:white; /*for example*/
  overflow:auto; /*for example*/
  border:4px solid red; /*for example*/
}

You can see result Here您可以在评论中找到您提到的最后一个问题...
如果您想隐藏溢出，请尝试overflow:hidden而不是......

Answer 2

如果您正在处理可变高度，则可以使用CSS表格呈现div。

div.boxes { display:table-row;  }
div.box   { display:table-cell; }

This jsfiddle should give you an indication of what it will look like with your layout.

Practically every major browser supports CSS tables now，请在必要时随意使用它们。固定高度是可以的，但是当您的内容超出原始预期大小时可能会导致问题。

创建

2 个答案: