0

このページを見て、「KissMyBass」画像の横に検索ボックスを表示し、上部のカートボックスから少し余裕を持たせるために、何を変更する必要があるかを教えてください。私はあらゆる種類のフロートとクリアの組み合わせを試しましたが、運がありませんでした。おそらくそれはポジショニングのことですが、私にはわかりません。

4

4 に答える 4

1 
div#search_block_top {
    background: url("../images/bg_search.gif") no-repeat scroll left top transparent;
    clear: right;
    float: right;
    height: 26px;
    margin: -40px 9px 0 0;
    right: 210px;
    top: 55px;
    width: auto;
}
于 2012-05-17T08:08:17.500 に答える
1

私はあなたのhtml構造を変更します、今あなたは持っています

<div>shopping cart</div>
<div>image</div>
<div>search</div>

そしてそれらのすべてが持っていfloat: rightます。のような構造はどうですか

<div>
  <div>shopping cart></div>
  <div>search</div>
</div>
<div>image</div>

CSSを変更せずに、探しているものを多かれ少なかれ取得する必要があります。

更新：申し訳ありませんが、あなたが何をしているのか誤解している場合は、clear: right;このdivを右側の画像の横、ショッピングカートの下に配置することをお勧めします:)

于 2012-05-17T08:13:42.233 に答える
0

これをcssファイルに追加できます。

#search_block_top { margin-top: -40px;}

後でこのプロパティを上書きしないように注意してください（margin:10pxどこかに設定されています）。

于 2012-05-17T07:38:23.757 に答える
0

私はあなたの右の子divにdivの親を与えたので、今あなたはあなたのコードに以下のコードを追加する必要がありますそれはスムーズに動作します：-

コード：-

<div style="float:right; width:460px; border:2px solid yellow;">
<div id="phoneorders" style="width: 244px; float: left;"> <img width="166" height="57" src="images/phonesupport.png"> <br>
        <img width="170" height="46" src="images/kissmybass.png"> </div>
<div id="shopping_cart"><a target="_self" class="bluelink" href="#">Shopping cart</a><br> (0)  €&lt;/div>


        <div id="search_block_top">
                <form method="post" action="#" id="searchbox">
                  <input type="text" autocomplete="off" class="search_query ac_input" id="search_query_top" name="search_query" value="" onfocus="if(this.value=='')this.value='';" onblur="if(this.value=='')this.value='';">
                  <a href="#"></a>
                  <input type="hidden" name="orderby" value="position">
                  <input type="hidden" name="orderway" value="desc">
                </form>
              </div>
        </div>
于 2012-05-17T10:56:06.193 に答える