0

私はdiv最も高い高さになる2つの高さを設定しようとしています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

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 に答える
0

両方の高さを 'auto' にすることでこれを行うことができます。

于 2012-12-13T11:18:58.827 に答える
0

色々使ってみてmanipulation effect.

これが完璧な例のリンクです。

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

于 2012-12-13T11:25:26.100 に答える