blocks|key|1228675|text|<div>

<div+style="border:1px+solid+#cccccc;+float:left;+min-height:200px;">

Some+content!<br/>
Some+content!<br/>
Some+content!<br/>
Some+content!<br/>
Some+content!<br/>

</div>

<div+style="border:1px+solid+#cccccc;+float:left;+min-height:200px;">

Some+content!

</div>

</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1228676|我在这里所做的是将高度更改为min-height，并给它一个固定值。如果其中一个正在调整大小，另一个将保持相同的高度。不知道这是不是你想要的|unstyled|1228677|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;div&gt;

&lt;div style="border:1px solid #cccccc; float:left; min-height:200px;"&gt;

Some content!&lt;br/&gt;
Some content!&lt;br/&gt;
Some content!&lt;br/&gt;
Some content!&lt;br/&gt;
Some content!&lt;br/&gt;

&lt;/div&gt;

&lt;div style="border:1px solid #cccccc; float:left; min-height:200px;"&gt;

Some content!

&lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>What I did here is to change the height to min-height and gave it a fixed value. if one of them is getting resized the other one will stay the same height. not sure if this is what you want</p>


blocks|key|1228765|text|这是一个CSS从未真正有过任何解决方案的领域--你只能使用<table>标签(或者使用CSS+display:table*值来伪造它们)，因为这是唯一实现了“保持一堆元素高度不变”的地方。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1228766|<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>|code-block|syntax|javascript|1228767|它适用于所有版本的Firefox，Chrome和Safari，Opera从版本8开始，IE从版本8开始。|1228768|entityMap^0|T|7|1B|E|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>This is an area where CSS has never really had any solutions — you’re down to using <code>&lt;table&gt;</code> tags (or faking them using the CSS <code>display:table*</code> values), as that’s the only place where a “keep a bunch of elements the same height” was implemented.</p>

<pre><code>&lt;div style="display: table-row;"&gt;

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

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

&lt;/div&gt;
</code></pre>

<p>This works in all versions of Firefox, Chrome and Safari, Opera from at least version 8, and in IE from version 8.</p>


blocks|key|1014260|text|你可以使用Jquery的相等高度插件来完成，这个插件使所有的div和其他的div高度完全相同。如果其中一个会增长，另一个也会增长。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014261|下面是一个实现示例|1014262|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.|code-block|syntax|javascript|1014263|这是链接|1014264|http://www.cssnewbie.com/equalheights-jquery-plugin/|offset|length|1014265|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1G|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

<p>You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow.</p>

<p>Here a sample of implementation</p>

<pre><code>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.
</code></pre>

<p>Here is the link</p>

<p><a href="http://www.cssnewbie.com/equalheights-jquery-plugin/" rel="noreferrer">http://www.cssnewbie.com/equalheights-jquery-plugin/</a> </p>


blocks|key|1014312|text|您可以使用jQuery轻松实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014313|CSS|1014314|.left,+.right+{border:1px+solid+#cccccc;}|code-block|syntax|javascript|1014315|jQuery|1014316|$(document).ready(function()+{
++++var+leftHeight+=+$('.left').height();
++++$('.right').css({'height':leftHeight});
});|1014317|HTML|1014318|+++<div+class="left">
++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Morbi+malesuada,+lacus+eu+dapibus+tempus,+ante+odio+aliquet+risus,+ac+ornare+orci+velit+in+sapien.+Duis+suscipit+sapien+vel+nunc+scelerisque+in+pretium+velit+mattis.+Cras+vitae+odio+sed+eros+mollis+malesuada+et+eu+nunc.</p>
+++</div>
+++<div+class="right">
++++<p>Lorem+ipsum+dolor+sit+amet.</p>
+++</div>|1014319|您需要包含jQuery|offset|length|1014320|entityMap|0|LINK|mutability|MUTABLE|url|http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.j^0|0|0|0|0|0|0|0|5|6|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>you can use jQuery to achieve this easily.</p>

<p>CSS</p>

<pre><code>.left, .right {border:1px solid #cccccc;}
</code></pre>

<p>jQuery</p>

<pre><code>$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});
</code></pre>

<p>HTML</p>

<pre><code>   &lt;div class="left"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.&lt;/p&gt;
   &lt;/div&gt;
   &lt;div class="right"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
   &lt;/div&gt;
</code></pre>

<p>You'll need to include <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.j" rel="nofollow noreferrer">jQuery</a></p>


blocks|key|1014353|text|您可以使用Faux+Columns。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1014354|基本上，它使用包含DIV的背景图像来模拟两个等高的DIV。使用此技术还允许您添加阴影，圆角，自定义边框或其他时髦的模式到您的容器。|1014355|但只适用于固定宽度的长方体。|1014356|经过良好的测试，在每个浏览器上都能正常工作。|1014357|entityMap|0|LINK|mutability|MUTABLE|url|http://www.alistapart.com/articles/fauxcolumns/^0|5|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

<p>You could use <a href="http://www.alistapart.com/articles/fauxcolumns/" rel="nofollow noreferrer">Faux Columns</a>. </p>

<p>Basically it uses a background image in a containing DIV to simulate the two equal-height-DIVs. Using this technique also allowes you to add shadows, rounded corners, custom borders or other funky patterns to your containers.</p>

<p>Only works with fixed-width boxes though.</p>

<p>Well tested out and properly working in every browser.</p>


blocks|key|1228960|text|令我惊讶的是，没有人提到(非常古老但可靠的)绝对列技术：http://24ways.org/2008/absolute-columns/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1228961|在我看来，它远远优于人造列和One+True+Layout技术。|1228962|一般的想法是，具有position:+absolute;的元素将相对于具有position:+relative;的最近父元素进行定位。然后，通过分配top:+0px;和bottom:+0px;+(或实际需要的任何像素/百分比)来拉伸列以填充100%25的高度。下面是一个例子：|style|CODE|1228963|<!DOCTYPE+html>
<html>
++<head>
++++<style>
++++++#container
++++++{
++++++++position:+relative;
++++++}

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

++++++#right-column
++++++{
++++++++position:+absolute;
++++++++top:+0px;
++++++++right:+0px;
++++++++bottom:+0px;
++++++++width:+50%25;
++++++++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>|code-block|syntax|javascript|1228964|entityMap|0|LINK|mutability|MUTABLE|url|http://24ways.org/2008/absolute-columns/^0|S|14|0|0|0|9|J|11|J|22|9|2C|C|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|11|8|@$A|12|B|13|H|I]|$A|14|B|15|H|I]|$A|16|B|17|H|I]|$A|18|B|19|H|I]]|9|@]|C|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@]|C|$M|N]]|$1|O|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>I'm surprised that nobody has mentioned the (very old but reliable) Absolute Columns technique:
<a href="http://24ways.org/2008/absolute-columns/">http://24ways.org/2008/absolute-columns/</a></p>

<p>In my opinion, it is far superior to both Faux Columns and One True Layout's technique.</p>

<p>The general idea is that an element with <code>position: absolute;</code> will position against the nearest parent element that has <code>position: relative;</code>. You then stretch a column to fill 100% height by assigning both a <code>top: 0px;</code> and <code>bottom: 0px;</code> (or whatever pixels/percentages you actually need.) Here's an example:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
      #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;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container"&gt;
      &lt;div id="left-column"&gt;
        &lt;ul&gt;
          &lt;li&gt;Foo&lt;/li&gt;
          &lt;li&gt;Bar&lt;/li&gt;
          &lt;li&gt;Baz&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="right-column"&gt;
        Lorem ipsum
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1228976|text|++++var+numexcute+=+0;
++++var+interval;
++++$(document).bind('click',+function+()+{

++++++++interval+=+setInterval(function+()+{
++++++++++++if+(numexcute+>=+20)+{
++++++++++++++++clearInterval(interval);
++++++++++++++++numexcute+=+0;
++++++++++++}
++++++++++++$('#leftpane').css('height',+'auto');
++++++++++++$('#rightpane').css('height',+'auto');
++++++++++++if+($('#leftpane').height()+<+$('#rightpane').height())
++++++++++++++++$('#leftpane').height($('#rightpane').height());
++++++++++++if+($('#leftpane').height()+>+$('#rightpane').height())

++++++++++++++++$('#rightpane').height($('#leftpane').height());
++++++++++++numexcute%2B%2B;
++++++++},+10);

++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1228977|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute &gt;= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() &lt; $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() &gt; $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });
</code></pre>


blocks|key|1229031|text|我也遇到了同样的问题，所以我使用jquery创建了这个小函数，因为jquery现在是每个web应用程序的一部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1229032|function+fEqualizeHeight(sSelector)+{
++++var+sObjects+=+$(sSelector);

++++var+iCount+=+sObjects.length;

++++var+iHeights+=+[];

++++if+(iCount+>+0)+{
++++++++$(sObjects).each(function+()+{
++++++++++++var+sHeight+=+$(this).css('height');
++++++++++++var+iHeight+=+parseInt(sHeight.replace(/px/i,''));
++++++++++++iHeights.push(iHeight);
++++++++});

++++++++iHeights.sort(function+(a,+b)+{
++++++++++++return+a+-+b
++++++++});

++++++++var+iMaxHeight+=+iHeights.pop();

++++++++$(sSelector).each(function+()+{
++++++++++++$(this).css({
++++++++++++++++'height':+iMaxHeight+%2B+'px'
++++++++++++});
++++++++});
++++}
}|code-block|syntax|javascript|1229033|您可以在页面就绪事件上调用此函数|1229034|$(document).ready(function(){
+++fEqualizeHeight('.columns');
});|1229035|我希望这对你有用。|1229036|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I was having the same problem so i created this small function using jquery as jquery is part of every web application nowadays.</p>

<pre><code>function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount &gt; 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}
</code></pre>

<p>You can call this function on page ready event</p>

<pre><code>$(document).ready(function(){
   fEqualizeHeight('.columns');
});
</code></pre>

<p>I hope this works for you.</p>


blocks|key|1014473|text|我最近遇到了这个问题，我不太喜欢这些解决方案，所以我尝试了一下。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014474|.mydivclass+{inline-block;+vertical-align:+middle;+width:+33%25;}|offset|length|style|CODE|1014475|entityMap^0|0|0|1R|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>I recently came across this and didn't really like the solutions so I tried experimenting.</p>

<p><code>.mydivclass {inline-block; vertical-align: middle; width: 33%;}</code></p>


blocks|key|1014504|text|我在搜索这个答案的时候发现了这个帖子。我刚刚做了一个小的jQuery函数，希望这能帮上忙，效果很不错：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014505|JAVASCRIPT|1014506|var+maxHeight+=+0;
$('.inner').each(function()+{
++++maxHeight+=+Math.max(maxHeight,+$(this).height());
});
$('.lhs_content+.inner,+.rhs_content+.inner').css({height:maxHeight+%2B+'px'});|code-block|syntax|javascript|1014507|HTML|1014508|<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>|1014509|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Just spotted this thread while searching for this very answer. I just made a small jQuery function, hope this helps, works like a charm:</p>

<p>JAVASCRIPT</p>

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

<p>HTML</p>

<pre><code>&lt;div class="lhs_content"&gt;
    &lt;div class="inner"&gt;
        Content in here
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="rhs_content"&gt;
    &lt;div class="inner"&gt;
        More content in here
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1014545|text|Flexbox|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014546|在flexbox中，它是一个单独的声明：|1014547|​|1014548|.row+{
++display:+flex;+/*+equal+height+of+the+children+*/
}

.col+{
++flex:+1;+/*+additionally,+equal+width+*/
++
++padding:+1em;
++border:+solid;
}|code-block|syntax|javascript|1014549|<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>|1014550|1014551|较旧的浏览器可能需要前缀，请参阅browser+support。|offset|length|1014552|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/#feat=flexbox^0|0|0|0|0|0|0|G|F|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@$P|16|Q|17|1|18]]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<h1>Flexbox</h1>
<p>With flexbox it's a single declaration:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
  &lt;div class="col"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/div&gt;
  &lt;div class="col"&gt;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.&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
<p>Prefixes may be required for older browsers, see <a href="http://caniuse.com/#feat=flexbox" rel="noreferrer">browser support</a>.</p>


blocks|key|1014578|text|我知道这已经很久了，但我还是分享了我的解决方案。这是一个jQuery技巧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014579|-+HTML|1014580|<div+class="custom-column">
++++<div+class="column-left">
++++++++asd
++++++++asd<br/>
++++++++asd<br/>
++++</div>
++++<div+class="column-right">
++++++++asd
++++</div>
</div>

<div+class="custom-column">
++++<div+class="column-left">
++++++++asd
++++</div>
++++<div+class="column-right">
++++++++asd
++++++++asd<br/>
++++++++asd<br/>
++++</div>
</div>|code-block|syntax|javascript|1014581|-+CSS|1014582|<style>
.custom-column+{+margin-bottom:10px;+}
.custom-column:after+{+clear:both;+content:"";+display:block;+width:100%25;+}
++++.column-left+{+float:left;+width:25%25;+background:#CCC;+}
++++.column-right+{+float:right;+width:75%25;+background:#EEE;+}
</style>|1014583|-+JQUERY|1014584|<script+src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
++++$balancer+=+function()+{
++++++++$('.custom-column').each(function(){
++++++++++++if($('.column-left',this).height()>$('.column-right',this).height()){
++++++++++++++++$('.column-right',this).height($('.column-left',this).height())
++++++++++++}+else+{
++++++++++++++++$('.column-left',this).height($('.column-right',this).height())
++++++++++++}

++++++++});

++++}
++++$balancer();
++++$(window).load($balancer());
++++$(window).resize($balancer());

});
</script>|1014585|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I know its been a long time but I share my solution anyway.
This is a jQuery trick.</p>

<p>--- HTML </p>

<pre><code>&lt;div class="custom-column"&gt;
    &lt;div class="column-left"&gt;
        asd
        asd&lt;br/&gt;
        asd&lt;br/&gt;
    &lt;/div&gt;
    &lt;div class="column-right"&gt;
        asd
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="custom-column"&gt;
    &lt;div class="column-left"&gt;
        asd
    &lt;/div&gt;
    &lt;div class="column-right"&gt;
        asd
        asd&lt;br/&gt;
        asd&lt;br/&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>---- CSS</p>

<pre><code>&lt;style&gt;
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
&lt;/style&gt;
</code></pre>

<p>--- JQUERY</p>

<pre><code>&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()&gt;$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
&lt;/script&gt;
</code></pre>


blocks|key|1014622|text|这是一个jQuery插件，可以为同一行上的所有元素设置相等的高度(通过检查元素的offset.top)。因此，如果您的jQuery数组包含来自多个行(不同的offset.top)的元素，则根据该行上具有最大高度的元素，每行将具有不同的高度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014623|jQuery.fn.setEqualHeight+=+function(){

var+$elements+=+[],+max_height+=+[];

jQuery(this).css(+'min-height',+0+);

//+GROUP+ELEMENTS+WHICH+ARE+ON+THE+SAME+ROW
this.each(function(index,+el){+

++++var+offset_top+=+jQuery(el).offset().top;
++++var+el_height+=+jQuery(el).css('height');

++++if(+typeof+$elements[offset_top]+==+"undefined"+){
++++++++$elements[offset_top]+=+jQuery();
++++++++max_height[offset_top]+=+0;
++++}

++++$elements[offset_top]+=+$elements[offset_top].add(+jQuery(el)+);

++++if(+parseInt(el_height)+>+parseInt(max_height[offset_top])+)
++++++++max_height[offset_top]+=+el_height;

});

//+CHANGE+ELEMENTS+HEIGHT
for(+var+offset_top+in+$elements+){

++++if(+jQuery($elements[offset_top]).length+>+1+)
++++++++jQuery($elements[offset_top]).css(+'min-height',+max_height[offset_top]+);

}|code-block|syntax|javascript|1014624|}；|1014625|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This is a jQuery plugin which sets the equal height for all elements on the same row(by checking the element's offset.top). So if your jQuery array contains elements from more than one row(different offset.top), each row will have a separated height, based on element with maximum height on that row.</p>

<pre><code>jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) &gt; parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length &gt; 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}
</code></pre>

<p>};</p>


blocks|key|1014637|text|The+Fiddle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1014638|HTML|1014639|<div+class="container">

++++<div+class="left-column">

++++</div>

++++<div+class="right-column">
++++++++<h1>Hello+Kitty!</h1>
++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit.+Laudantium+cum+accusamus+ab+nostrum+sit+laborum+eligendi,+totam+nam+aperiam+harum+officia+commodi+tempora+dolorum.+Incidunt+earum+explicabo+deleniti+architecto+illo!</p>
++++++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit.+Laudantium+cum+accusamus+ab+nostrum+sit+laborum+eligendi,+totam+nam+aperiam+harum+officia+commodi+tempora+dolorum.+Incidunt+earum+explicabo+deleniti+architecto+illo!</p>
++++</div>

</div>|code-block|syntax|javascript|1014640|CSS|1014641|.container+{
++++float:+left;
++++width:+100%25;
++++background-color:+black;
++++position:+relative;
++++left:+0;
}

.container:before,
.container:after+{
++++content:+"+";
++++display:+table;
}

.container:after+{
++++clear:+both;
}

.left-column+{
++++float:+left;
++++width:+30%25;
++++height:+100%25;
++++position:+absolute;
++++background:+wheat;
}

.right-column+{
++++float:+right;
++++width:+70%25;
++++position:+relative;
++++padding:+0;
++++margin:+0;
++++background:+rebeccapurple;++++++++++++
}|1014642|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/drjorgepolanco/9ab0v9ra/1/^0|4|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>The <a href="https://jsfiddle.net/drjorgepolanco/9ab0v9ra/1/" rel="nofollow">Fiddle</a></p>

<p>HTML</p>

<pre><code>&lt;div class="container"&gt;

    &lt;div class="left-column"&gt;

    &lt;/div&gt;

    &lt;div class="right-column"&gt;
        &lt;h1&gt;Hello Kitty!&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!&lt;/p&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}
</code></pre>


blocks|key|1229237|text|我喜欢使用伪元素来实现这一点。您可以使用它作为内容的背景，并让它们填充空间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1229238|使用这些方法，您可以在列、边框等之间设置边距。|1229239|​|1229240|.wrapper{
++position:+relative;
++width:+200px;
}
.wrapper:before,
.wrapper:after{
++content:+"";
++display:+block;
++height:+100%25;
++width:+40%25;
++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%25;
++display:+inline-block;
++position:+relative;
++z-index:+1;
}
.div1{
++margin-right:+20%25;
}|code-block|syntax|javascript|1229241|<div+class="wrapper">
++<div+class="div1">Content+Content+Content+Content+Content+Content+Content+Content+Content
++</div><div+class="div2">Other</div>
</div>|1229242|1229243|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I like to use pseudo elements to achieve this. You can use it as background of the content and let them fill the space.</p>

<p>With these approach you can set margins between columns, borders, etc.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
  &lt;div class="div1"&gt;Content Content Content Content Content Content Content Content Content
  &lt;/div&gt;&lt;div class="div2"&gt;Other&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1014686|text|CSS网格方式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014687|实现这一点的现代方法(也避免了每两个项目周围声明一个<div+class="row"></div>-wrapper+)将是使用CSS网格。这还可以让您轻松控制项目行/列之间的间隙。|offset|length|style|CODE|1014688|​|1014689|.grid-container+{
++display:+grid;
++grid-template-columns:+repeat(2,+1fr);+/*+or+simply+"1fr+1fr;"+*/
++grid-row-gap:+10px;+
++grid-column-gap:+10px;
}

.grid-item+{
++background-color:+#f8f8f8;
++box-shadow:+0+0+3px+#666;
++text-align:+center;
}

.grid-item+img+{
++max-width:+100%25;
}|code-block|syntax|javascript|1014690|<div+class="grid-container">
++<div+class="grid-item">1+<br+/>1.1<br+/>1.1.1</div>
++<div+class="grid-item">2</div>
++<div+class="grid-item">3
++++<img+src="https://lorempixel.com/420/320/abstract/1/Sample"+alt=""+/>
++++3.1
++</div>
++<div+class="grid-item">4</div>
++<div+class="grid-item">5+<br+/>1.1<br+/>1.1.1</div>
++<div+class="grid-item">6<img+src="https://lorempixel.com/400/300/abstract/"+alt=""+/>
++++6.1</div>
++<div+class="grid-item">7</div>
++<div+class="grid-item">8</div>
++<div+class="grid-item">9+<br+/>1.1<br+/>1.1.1</div>
++<div+class="grid-item">10</div>
++<div+class="grid-item">11
++++<img+src="https://lorempixel.com/420/320/abstract/1/Sample"+alt=""+/>
++++11.1
++</div>
++<div+class="grid-item">12</div>
</div>|1014691|1014692|entityMap^0|0|Q|N|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Y|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<h1>The CSS grid way</h1>

<p>The modern way of doing this (which also avoids having to declare a <code>&lt;div class="row"&gt;&lt;/div&gt;</code>-wrapper around every two items) would be to make use of a CSS grid. This also gives you easy control on the gaps between your item rows/columns.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid-container"&gt;
  &lt;div class="grid-item"&gt;1 &lt;br /&gt;1.1&lt;br /&gt;1.1.1&lt;/div&gt;
  &lt;div class="grid-item"&gt;2&lt;/div&gt;
  &lt;div class="grid-item"&gt;3
    &lt;img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" /&gt;
    3.1
  &lt;/div&gt;
  &lt;div class="grid-item"&gt;4&lt;/div&gt;
  &lt;div class="grid-item"&gt;5 &lt;br /&gt;1.1&lt;br /&gt;1.1.1&lt;/div&gt;
  &lt;div class="grid-item"&gt;6&lt;img src="https://lorempixel.com/400/300/abstract/" alt="" /&gt;
    6.1&lt;/div&gt;
  &lt;div class="grid-item"&gt;7&lt;/div&gt;
  &lt;div class="grid-item"&gt;8&lt;/div&gt;
  &lt;div class="grid-item"&gt;9 &lt;br /&gt;1.1&lt;br /&gt;1.1.1&lt;/div&gt;
  &lt;div class="grid-item"&gt;10&lt;/div&gt;
  &lt;div class="grid-item"&gt;11
    &lt;img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" /&gt;
    11.1
  &lt;/div&gt;
  &lt;div class="grid-item"&gt;12&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1014734|text|我已经尝试了上面提到的几乎所有方法，但flexbox解决方案在Safari上不能正常工作，网格布局方法在IE的旧版本上也不能正常工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014735|此解决方案适用于所有屏幕，并且跨浏览器兼容：|1014736|.container+{margin:15px+auto;}
.container+ul+{margin:0+10px;}
.container+li+{width:30%25;+display:+table-cell;+background-color:#f6f7f7;box-shadow:+0+2px+5px+0+rgba(0,+0,+0,+0.25);}

@media+(max-width:+767px){
++++.container+li+{+display:+inline-block;+width:100%25;+min-height:auto!important;}
}|code-block|syntax|javascript|1014737|上面的方法等于单元格高度，对于手机或平板电脑等较小的屏幕，我们可以使用上面提到的@media方法。|offset|length|style|CODE|1014738|entityMap^0|0|0|0|14|6|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I have tried almost all the mentioned methods above, but the flexbox solution won't work correctly with Safari, and the grid layout methods won't work correctly with older versions of IE.</p>

<p>This solution fits all screens and is cross-browser compatible:</p>

<pre class="lang-css prettyprint-override"><code>.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}
</code></pre>

<p>The above method will equal cells height, and for the smaller screens like mobile or tablet, we can use the <code>@media</code> method mentioned above.</p>


blocks|key|1014790|text|我只是想给Pavlo所描述的优秀的Flexbox解决方案增加一点，在我的例子中，我有两个数据列表/列，我想要并排显示，中间只有一点间距，在封闭的div中水平居中。通过在第一个(最左边)+flex:1+div中嵌套另一个div，并将其正确浮动，我就得到了我想要的东西。我找不到任何其他方法来在所有视口宽度下都能一致地成功完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014791|<div+style="display:flex">
++++<div+style="flex:1;padding-right:15px">
++++++++<div+style="float:right">
++++++++++++[My+Left-hand+list+of+stuff]
++++++++</div>
++++</div>

++++<div+style="flex:1;padding-left:15px">
++++++++++++[My+Right-hand+list+of+stuff]
++++</div>
</div>|code-block|syntax|javascript|1014792|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I just wanted to add to the great Flexbox solution described by Pavlo, that, in my case, I had two lists/columns of data that I wanted to display side-by-side with just a little spacing between, horizontally-centered inside an enclosing div.  By nesting another div within the first (leftmost) flex:1 div and floating it right, I got just what I wanted.  I couldn't find any other way to do this with consistent success at all viewport widths:</p>
<pre><code>&lt;div style=&quot;display:flex&quot;&gt;
    &lt;div style=&quot;flex:1;padding-right:15px&quot;&gt;
        &lt;div style=&quot;float:right&quot;&gt;
            [My Left-hand list of stuff]
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div style=&quot;flex:1;padding-left:15px&quot;&gt;
            [My Right-hand list of stuff]
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


<p>I have two divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. I can't figure this one out though. Ideas?</p>

<p>To clarify my confusing question, I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="overflow: hidden"&gt;
    &lt;div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"&gt;
        Some content!&lt;br/&gt;
        Some content!&lt;br/&gt;
        Some content!&lt;br/&gt;
        Some content!&lt;br/&gt;
        Some content!&lt;br/&gt;
    &lt;/div&gt;
    &lt;div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"&gt;
        Some content!
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


How do I keep two side-by-side divs the same height?

容器

jQuery

我有两个并排的div。我希望它们的高度是相同的，如果其中一个调整了大小，也会保持不变。不过，我还是搞不懂这个。想法？为了澄清我困惑的问题，我希望两个框的大小总是相同的，所以如果一个框因为放入文本而增长，另一个框应该增长到与高度匹配。​<div style="overflow: hidden">    <div styl...

问如何使两个并排的div保持相同的高度？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使两个并排的div保持相同的高度？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使两个并排的div保持相同的高度？
EN