0

我正在尝试设置两个divs 的高度，这将是最高的高度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;
}
4

4 回答 4

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>

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

于 2012-12-13T11:21:27.880 回答
0

您可以通过将两者的高度设置为“自动”来做到这一点。

于 2012-12-13T11:18:58.827 回答
0

尝试使用一些manipulation effect.

这是完美示例的链接。

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

于 2012-12-13T11:25:26.100 回答
0

使用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>
于 2012-12-13T13:11:28.440 回答