如何保持两块平行的高度相同?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (64)

我有两块硬币并排着。我希望它们的高度是一样的,如果其中一个调整大小的话,保持不变。但我还是搞不懂这个。想法?

为了澄清我令人困惑的问题,我希望这两个盒子的大小总是一样的,所以如果一个盒子因为文本被放进去而增长,那么另一个盒子应该长得与高度相匹配。

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>
提问于
用户回答回答于

Flexbox

对于Flexbox,这是一个单一的声明:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}
<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

旧浏览器可能需要前缀,请参阅浏览器支持...

用户回答回答于

我喜欢用pseudo elements来达到这个目的。你可以使用它作为背景的内容,让他们填补空间。

使用这些方法,你可以在列、边框等之间设置边距。

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}
<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>
用户回答回答于

如果你不介意div作为一名大师,为两个人的身高做口授。div有这样的情况:

小提琴

无论如何,div在右边将展开或压缩&溢出以匹配div在左边。

双双divS必须是容器的直接子级,并且必须指定容器中的宽度。

相关CSS:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}
用户回答回答于

在寻找答案的时候发现了这条线索。我刚刚做了一个小的jQuery函数,希望这能帮上忙,就像一种魅力:

JavaScript

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

HTML

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>
用户回答回答于

你可以用 Faux Columns.

基本上,它在一个包含DIV的背景图像中模拟两个等高的DIV。使用这种技术还允许你添加阴影,圆角,自定义边框或其他时髦的模式到你的容器。

不过,只适用于固定宽度的盒子。

测试良好,并在每个浏览器中正常工作。

用户回答回答于

你可以使用jQuery的等高插件来完成,这个插件使所有的div与其他插件的高度完全相同。如果其中一种生长,另一种也会增长。

这里是一个实现示例

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

这是链接

http://www.cssnewbie.com/equalHigh-jQueryplugin/

用户回答回答于

我感到惊讶的是,没有人提到(非常古老但可靠的)绝对列技术: http://24ways.org/2008/absolute-columns/

在我看来,它远远优于假列和一个真正的布局的技术。

一般的想法是position: absolute;将定位到最近的父元素,该父元素具有position: relative;.然后,通过将两个top: 0px;bottom: 0px;(或实际需要的像素/百分比)下面是一个示例:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>
用户回答回答于

使用Javascript

使用jQuery,你可以在一个超级简单的单行脚本中完成它。

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

使用CSS

这更有趣。这项技术叫做 Faux Columns.或多或少地,你实际上并没有设置实际高度是相同的,但是你装配了一些图形元素,所以它们同样的高度。

用户回答回答于

这是CSS从未真正有过任何解决方案的领域-- 你可以使用<table>标记(或使用CSS伪造标记)display:table*值),因为这是唯一实现“保持一堆相同高度的元素”的地方。

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

这在火狐、Chrome和Safari的所有版本中都适用,Opera至少从8版本开始,在IE中使用8版。

用户回答回答于

这是许多人遇到过的一个常见问题基本上,你所做的是使div/列都非常通过添加一个padding-bottom: 100%然后“欺骗浏览器”认为他们没有那么高margin-bottom: -100%,其中也包括了许多例子。

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}
<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

    <div class="column">
        Something
    </div>

</div>

所属标签

可能回答问题的人

  • 西风

    renzha.net · 站长 (已认证)

    7 粉丝1 提问9 回答
  • 四无君

    0 粉丝0 提问3 回答
  • 拉布拉多拉不多

    1 粉丝0 提问2 回答
  • 小书虫

    0 粉丝1 提问2 回答

扫码关注云+社区

领取腾讯云代金券