Question

我正在努力完成像div一样简单的事情。问题是我在CSS方面非常有能力，但是我尝试使用的解决方案并没有按预期工作，这就是问题所在。

我用过:(所以两个div并排放置）

display：block;
float：left;
margin-right：15px;

它完美地工作 LOCALLY ，问题是我正在创建这个作为模板解决方案的html＆amp; css正在构建到一个系统中，之后将生成一个javascript标记。然后，javascript标记将被抛入不同的网站，因此，它在所有浏览器中都非常重要。

然后我尝试将div（放置在侧面的那个）放置为：绝对并使用left将它放置在侧面...这不起作用，因为它绝对到标签的实现位置，意味着它将根据标记的实施位置显示不同的位置。

所以我的问题是，有没有办法可以使用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＆amp; Chrome可以看到差异以及它的行为有多奇怪。

点击右侧小横幅的按钮说明：“退出我”，你会看到div展开，扩展的div是我想要一直向右的位置。

希望你能帮助我！：）

Answer 1

你可以使用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>

Answer 2

我已经找到了解决问题的javascript解决方案。

我已经在所有浏览器中使用了绝对位置来修复它，然后根据网站的宽度创建了一个javascript，它的位置总是在我的容器右边10个像素。

以下是我的代码：

$(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);
    });
});

如何并排放置2个div（替代解决方案）

2 个答案: