0

こんにちは私はウィンドウのサイズを変更するとdivが以下のように正しく配置されないのでcssに問題があります

ここに画像の説明を入力してください

これはdivを含むcssです

.similar_story_block_form {
    background-color: white;
    border: 1px solid #CCCCCC;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.8);
    font-size: 13px;
    left: 337px;
    position: absolute;
    top: 105px;
    width: 337px;
    z-index: 100;
}

HTMLコード

<div id="search-box-form">
  <div style="display:block;" class="similar_story_block_form">
     <div class="head">
        <p>What interest you?</p>
        <a onclick="javascript:closeSearchBox(event);" id="close-element-form" href="#"></a></div>
<ul>
 <li>
   <a no-confirm="" class="pushstate">
    <div col-400="" class="fleft"><p>No such business</p></div></a></li>
    <div class="head"><p>Nothing is found from <span style="color:red;font-weight:italic;">"s"</span></p>
    </div>
</ul>
</div>
</div>

現在、私は同じ問題を引き起こすクロムを使用しています。ここで何が欠けていますか？お手伝いありがとうございます

4

3 に答える 3

2

「位置：相対;」を置く または「＃search-box-form」要素の「position：absolute」。そうすれば、「。similar_story_block_form」の位置は親の位置に対して相対的/絶対的になります。グローバル/ボディポジションの代わりに。

于 2012-10-18T11:25:39.287 に答える
1

クラスsimilar_story_block_formを持つdivの親はsearch-box-form相対位置を持つ必要がありますが、クラスsearch-box-formを持つdivは絶対位置を持つ必要があるため、divの上部と左側の値を変更する必要がありますsearch-box-form。left:0;top:0;親divにも必ず追加してください。search-box-form

于 2012-10-18T11:30:30.220 に答える
0

左、上、幅のスタイル値をピクセルではなく％で指定する必要があります。

ピクセル単位で指定すると、サイズと位置は標準のブラウザサイズで修正され、サイズ変更されたブラウザサイズでは修正されません。

％で指定すると、親要素に応じて幅と位置が自動的に変更されます。

例えば、

 .similar_story_block_form{ width:80%; }

「similar_story_block_form」の幅が親要素の80％になります。また、親要素がbodyの場合、ブラウザウィンドウの幅とともにその幅を自動的に変更します。

于 2012-10-18T11:19:09.220 に答える