0

ページの中央にあるクラス内に iframe があります。上部にある 2 つのラジオ ボタンのいずれかをクリックすると、選択したボタンに応じてフォームが展開されます。フォームが右または左にフロートしている場合、これらのボタンのいずれかを押すとフォームが拡大し、その下の灰色の領域 (雇用者とフリーランサーのテキスト セクション) がページ上で下に移動します。フォームをページの中央に揃えると、ページの残りの部分を下に移動するフローティングに関連付けられたプロパティを取得できません。代わりに、灰色の背景をテキスト領域で覆うだけです。私のサイトはavidest.com/newにあります。フォームを中央に置いたまま、浮いているように動作させるにはどうすればよいですか? これが私のcssです：

.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;}
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}  
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;} 
.formbox{ width: 48%; padding: 45px 60px 20px 0px; margin-top: 30px;background-color:#ffffff;
          border:1px solid black;opacity:0.91;filter:alpha(opacity=91); /* For IE8 and earlier */
          border-radius: 10px;margin-left: auto;margin-right: auto;}
.body { background: #bebebe; border-top: 0px solid; border-color: #e3e3e3; } 
.body_main_page { width:470px; float:left; margin:0; padding:15px 10px;}

そして、ここにhtmlがあります：

<div class="main>
 <div class="slider">
    <div class="gallery">
      <div class="formbox"> form is here </formbox>
    </div>
 </div>
 <div class="body"> 
    <div class="body_main_page">Freelancer Text is here</div>
    <div class="body_main_page">Employer text is here</div>
 </div>
</div>

ありがとう

4

1 に答える 1

1

次のようにCSSを変更してみてください。

.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;}
.slider { background: transparent; margin:0 auto; padding:0; min-height:420px;}  
.slider .gallery { margin:0 auto; width:980px; min-height:420px; padding:0;} 
.formbox{ width: 48%; padding: 45px 60px 20px 0px; margin-top: 30px;background-color:#ffffff;
      border:1px solid black;opacity:0.91;filter:alpha(opacity=91); /* For IE8 and earlier      */
      border-radius: 10px;margin-left: auto;margin-right: auto;}
 .body { background: #bebebe; border-top: 0px solid; border-color: #e3e3e3; } 
 .body_main_page { width:470px; float:left; margin:0; padding:15px 10px;}

柔軟な高さにしたい場合は、固定の高さを指定しないでください...

于 2013-03-04T20:40:46.810 に答える