Question

我在一个包装器div中有两个div，请参阅以下情况：

<div class="container">
 <div style="display:table;" class="row row-mobile fp-white-row">

  <div style="display:table-cell;" class="col-sm-6 portfolio-post-l">
    <h1><?php the_field('port_kop_linker_kolom'); ?></h1>
    <?php the_field('port_inhoud_linker_kolom'); ?>
  </div>

  <div style="display:table-cell;" class="col-sm-6 portfolio-post-r">
    <h1><?php the_field('port_kop_rechter_kolom'); ?></h1>
    <?php the_field('port_inhoud_rechter_kolom'); ?>
  </div>

 </div>
</div>

我希望portfolio-post-l与portfolio-post-r的高度相同，如果有必要，我希望相反。我怎么能做到这一点？它是必需的，因为portfolio-post-l有一个边框，应该伸展到包装div row row-mobile fp-white-row的底部。我知道一个解决方案是给portfolio-post-r一个左边框，但是如果右边框成为最短的div怎么办？无论谁是更高的div，我都需要确保它可以双向工作。

Here an image of my current layout

我在网上搜索了大约一个小时，找不到任何简单的解决方案，所有这些都与JS或display:table无关，这对我不起作用。包含此功能真的不方便吗？

谢谢！

编辑01 我没有将CSS应用于.portfolio-post-l＆amp; .portfolio-post-r除了背景颜色和边框。但是，Bootstrap将CSS应用于col-sm-6，这就是CSS：

width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;

我刚刚发现，感谢 Krzysiek col-sm-6弄乱了table显示修复程序。如果我删除该类，它可以工作，但是，我想保留它，因为它是用于布局页面的Bootstrap类.... Here's a Fiddle of my layout 我认为这与定位有关，任何人有什么建议吗？

谢谢！

/编辑01

给两个div高度相同

0 个答案: