2列CSS div与可伸缩的高度 [英] 2 column CSS div with stretchable height

问题描述

相关（可能重复）的问题：

$ b $

b

使两个浮动CSS元素具有相同的高度

您好，每一个，

小时创建一个可伸缩的2列div，但没有任何运气。这里是我的html代码和我的CSS代码下面它

 < div class =two_cols_container> 
< div class =two_cols> 
< div class =left-col> 
 test 
< / div> 
< div class =right-col> 
 test 
< / div> 
< / div> 
< / div> 
  

我的CSS代码是

  .two_cols_container {
 width：100％; 
 height：100％; 
} 
 .two_cols {
 position：relative; 
 margin：0 auto; 
 border：1px solid black; 
 height：100％; 
 height：auto！important; 
 min-height：100％; 
} 
 .two_cols .left-col {
 / * position：absolute; 
 left：0; * / 
 float：left; 
} 
 .two_cols .right-col {
 / * position：absolute; 
 right：0; * / 
 float：right;任何想法？

 
 
 
 h2_lin>解决方案
 A：使用float OR绝对定位来创建列。不是两个。你可以将两列都向左移动，应该没有绝对定位。
 
 
 
 B：你的大问题是列不能下一个如果它们的宽度都是100％，则彼此相同。当他们占据整个宽度时，他们没有办法坐在它们的包含元素中。 将宽度设置为最多50％，但我会稍微降低一些浏览器错误。 
 
 
 
编辑：I同意Sneakiness，湿的宽度到低于50％的东西，因为边距和填充也要适合。 
 

  
Related (possibly duplicate) questions:
  
  
How do I achieve equal height divs with HTML / CSS ?
  
  
Make Two Floated CSS Elements the Same Height
Hello, every one,

I tried for hours to create a stretchable 2 columns div but without any luck. here is my html code and my css code below it
<div class="two_cols_container">
  <div class="two_cols">
    <div class="left-col">
      test
    </div>
    <div class="right-col">
      test
    </div>
  </div>
</div>
my css code is
.two_cols_container {
  width: 100%;
  height: 100%;
} 
.two_cols {
  position: relative;
  margin: 0 auto;
  border: 1px solid black;
  height: 100%;
  height: auto !important;
  min-height: 100%; 
}
.two_cols .left-col {
  /*position: absolute;
    left: 0;*/
  float: left;
}
.two_cols .right-col {
  /*position: absolute;
    right: 0;*/
  float: right;
}
any idea?
解决方案
A: either use float OR absolute positioning to make your columns. not both. You can just float both the columns to the left and it should be ok with no absolute positioning.

B: you're big problem is the columns can't be next to each other if both of their' widths are 100%. There's no way they can sit side by side in their containing element when they both take up the whole width. Set the width to at most 50%, but I'd go with a little lower to account for some browser bugs. 

EDIT: I agree with Sneakiness, wet the width to something lower than 50%, because the margins and padding have to fit too. 

                        
这篇关于2列CSS div与可伸缩的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！