0

divを並べて配置するのと同じくらい簡単なことを達成しようとしています。問題は、私が CSS で非常に有能であることですが、使用しようとしているソリューションが意図したとおりに機能しないことです。ここに問題があります。

私は使用しました：（したがって、両方のdivが並んでいます）

表示ブロック;
フロート: 左;
マージン右: 15px;

そして、それは問題なくLOCALLYで動作します。これは、html と css がシステムに組み込まれ、その後 javascript タグに生成されるテンプレート ソリューションとして作成していることです。JavaScript タグはさまざまな Web サイトにスローされるため、すべてのブラウザーで同様に機能することが非常に重要です。

次に、div（横にあるもの）を次のように配置しようとしました：絶対的で、左を使用して横に配置します...タグが実装されている場所に絶対的であるため、それも機能しません。つまり、表示されますタグが実装されているサイトによって場所が異なります。

だから私の質問は、cssまたはjavascriptのいずれかを使用して、タグを実装する場所に関係なくdivを並べて表示する方法はありますか?

以下は私のコードです:

HTML:

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Sidekick</title>     
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/sidekick.js"></script>      
    <link href="css/style.css" rel="stylesheet" type="text/css">    
    </head>
        <body>  
        <div class="eas_sidekick_divs">     
            <div id="eas_sidekick">
                <div class="eas_sidekick_open">x</div>
            </div>
            <div id="eas_sidekick_container"></div>             
        </div>  
    </body>
</html>

CSS:

.eas_sidekick_divs div
{
    display: block;
    float: left;
    margin-right:15px;  
}

#eas_sidekick
{
    width:300px;
    height:600px;
    background: #ccc;
}

#eas_sidekick_container
{   
    width: 850px;
    height:600px;
    background: #ccc;           
}

このソリューションは、前述のようにローカルで機能しますが、これをタグに生成した後では機能しません。ここで例を見ることができます: http://yoursource.eu/stuff/Templates/sidekick/300x250/javascript.html

IE や Chrome などのさまざまなブラウザーを見て、その違いとその動作の奇妙さを確認してください。

右側の小さなバナーのボタンをクリックすると、「exiting me」と表示され、div が展開されます。展開された div は、常に右に配置したいものです。

あなたが私を助けてくれることを願っています! :)

4

2 に答える 2

0

display:inline-block; を使用できます。または表示:ブロック; どちらも機能しますが、「#eas_sidekick_container」の幅は親要素の幅と等しいか、それを超えないようにする必要があります。「#eas_sidekick_container」の幅を修正してください。

ここに修正されたコードがあります

<!DOCTYPE html>
<html>
<head>
<title></title>
  <style type="text/css">
   .eas_sidekick_divs div
    {        
        float: left;
        margin-right:15px;  
    }

  #eas_sidekick
  {
      width:300px;
      height:600px;
      background: #ccc;
  }

  #eas_sidekick_container
  {   
      width: 300px;
      height:600px;
      background: #ccc;           
  }
  </style>
</head>
<body>
  <div class="eas_sidekick_divs">     
   <div id="eas_sidekick">
      <div class="eas_sidekick_open">x</div>
   </div>
   <div id="eas_sidekick_container"></div>              
</div>
</body>
</html>
于 2013-02-06T12:21:40.903 に答える
0

私は自分の問題を解決するための JavaScript ソリューションを見つけました。

すべてのブラウザーで絶対位置を使用して修正し、サイトの幅に応じて、コンテナーの右側に常に 10 ピクセルを配置する JavaScript を作成しました。

以下は私のコードです：

$(document).ready(function() {

    var cssWidth = 1024;
    var cssPos = 10;

    $("#eas_sidekick_container").hide();
    $("#eas_sidekick_container").css(
    {
        width: '0px',
        position: 'absolute',
        top: '0px',
        left: cssWidth + cssPos
    });

 $(".eas_sidekick_open").click(
            function() {
                $("#eas_sidekick_container").show();
            $("#eas_sidekick_container").animate({
                width: '850px'              
            });
            $('html, body').animate({
                scrollLeft: '850'
            });
    });

 $(".eas_sidekick_close").click(
            function() {
                $("#eas_sidekick_container").animate({
            width: '0px'
            });
            setTimeout( function(){
                $("#eas_sidekick_container").css(
                    'display' , 'none' 
                );
            }, 350);
    });
});
于 2013-02-06T14:03:49.740 に答える