Question

我正在尝试设置两个div的高度，这将是最高div的高度

这是我到目前为止所尝试的：

HTML：

<div id="left">
    1. SOME TEXT HERE
</div>
<div id="right">
    <input type="radio" name="Group1" /> <font size="1.5px">NO</font>
    <input type="radio" name="Group1" /> <font size="1.5px">YES</font>
    <br />
    <div class="textToRight">
        <font size="1.5px">Text:</font> 
        <input type="text" class="boxAlignRight22" />
    </div>
</div>
<div style="clear:both"></div>

CSS：

#left {
    margin-top:5px;
    margin-left:1.4%;
    float:left;
    background:#FFFFFF;
    width:59.8%;
    text-align:left;
    padding:5px;
}

#right {
    margin-top:5px;
    margin-right:1.4%;
    float:right;
    background:#FFFFFF;
    width:34.8%;
    padding:1.5px 5px 1.5px 5px;
    text-align:left;
}

Answer 1

  <div class="main">
      <div id="left">
          1. SOME TEXT HERE
      </div>
      <div id="right">
          <input type="radio" name="Group1" /> <font size="1.5px">NO</font>
          <input type="radio" name="Group1" /> <font size="1.5px">YES</font><br />
          <div class="textToRight"><font size="1.5px">Text:</font> 
              <input type="text" class="boxAlignRight22" /></div>
          </div>
      </div>    
      <div style="clear:both">
  </div>

  <style>
  #left {
      border:solid #000 1px;
      float:left;
      height:100%;
      padding:5px;
  }

  #right {
      border:solid #000 1px;
      float:left;
      height:100%;
      padding:5px;
  }
  .main{
      height:100px;
  }
  </style>

尝试这个..希望这有帮助

Answer 2

您可以将两者的高度都设为“自动”。

Answer 3

尝试使用一些manipulation effect.

以下是完美示例的链接。

http://www.vanseodesign.com/css/equal-height-columns/

Answer 4

使用javascript使其非常动态，你也可以使用jquery来缩短它 jQuery: $('#right').css.height($('#left').css.height())这是为了使右侧高度等于左侧

使用一些脚本：

<head>

<style>
#content{
height:auto;
}
#left {
margin-top:5px;
margin-left:1.4%;
float:left;
background:#938922;
width:59.8%;
text-align:left;
padding:5px;

}

#right {
margin-top:5px;
margin-right:1.4%;
float:right;
background:#514261;
width:34.8%;
padding:1.5px 5px 1.5px 5px;
text-align:left;

}
</style>
<script>
function load()
{
var leftcont = document.getElementById('left');
var rightcont = document.getElementById('right');
var lh = leftcont.offsetHeight;
var rh = rightcont.offsetHeight;
if (rh>lh)  leftcont.style.height = rightcont.style.height=rh;
else       leftcont.style.height = rightcont.style.height=lh;
}
</script>
</head><body onload='load()'>
<div id ="content">
<div id="left">
1. SOME TEXT HERE
</div>
<div id="right">
<input type="radio" name="Group1" /> <font size="1.5px">NO</font>
<input type="radio" name="Group1" /> <font size="1.5px">YES</font>
<br />
<div class="textToRight">
    <font size="1.5px">Text:</font> 
    <input type="text" class="boxAlignRight22" />
</div>
</div>
<div style="clear:both"></div>
</div>
</body>

相同的高度元素

4 个答案: