Javascript 如何并排放置2个div（备选方案）_Javascript_Html_Css_Tags

Javascript 如何并排放置2个div（备选方案）

javascript html css tags

Javascript 如何并排放置2个div（备选方案）,javascript,html,css,tags,Javascript,Html,Css,Tags,我正在努力完成一些简单的事情，比如并排放在div的旁边。问题是我非常擅长CSS，但是我尝试使用的解决方案并没有达到预期的效果，这就是问题所在我用过：（所以两个div并排放置）显示：块浮动：左右边距：15px 它可以在本地完美地工作，我正在创建一个模板解决方案，将html和css构建到一个系统中，然后生成一个javascript标记。javascript标记将被扔进不同的网站，因此，它在所有浏览器中的行为都是一样的，这一点非常重要然后我尝试将div（侧放的那个）定位为：绝对，并使用left将

我正在努力完成一些简单的事情，比如并排放在div的旁边。问题是我非常擅长CSS，但是我尝试使用的解决方案并没有达到预期的效果，这就是问题所在

我用过：（所以两个div并排放置）

显示：块
浮动：左
右边距：15px

它可以在本地完美地工作，我正在创建一个模板解决方案，将html和css构建到一个系统中，然后生成一个javascript标记。javascript标记将被扔进不同的网站，因此，它在所有浏览器中的行为都是一样的，这一点非常重要

然后我尝试将div（侧放的那个）定位为：绝对，并使用left将其定位在侧边。。。这也不起作用，因为它与实现标记的位置绝对相关，这意味着它将根据实现标记的站点显示不同的位置

所以我的问题是，有没有一种方法可以使用css或javascript，这样无论在哪里实现标记，我的div都是并排的

下面是我的代码：

HTML:

如前所述，此解决方案在本地工作，但在我将其生成到标记之后就不起作用了。您可以在这里看到示例：

看看不同的浏览器，比如IE和Chrome，看看它们之间的区别以及它们的行为有多奇怪

点击右边的小横幅上的按钮：“退出我”，你会看到div展开，展开的div就是我想要一直定位到右边的div

希望你能帮助我！：）

您可以使用显示：内联块；或显示：块；两者都可以工作，但正如您提到的“#eas#u sidekick_container”宽度应等于或不超过父元素宽度，请更正“#eas#u 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>


.eas_sidekick_div
{        
浮动：左；
右边距：15px；
}
#eas_伙伴
{
宽度：300px；
高度：600px；
背景：#ccc；
}
#eas_sidekick_容器
{   
宽度：300px；
高度：600px；
背景：#ccc；
}
x

我找到了一个javascript解决方案来解决我的问题

我在所有浏览器中都使用了position absolute来修复它，然后创建了一个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);
    });
});

您不需要在DIV上指定显示块，因为这是默认状态。你说它的行为有多古怪是什么意思。你的链接在IE、FF和Chrome中对我来说是一样的。在您的演示页面上，标签应该被重新放置到HEAD标签中。您将其放置的位置无效。您也没有声明有效的DOCTYPE。为了便于查看，我排除了html的其余部分。有一个doctype声明。在“怪异”一词中，我的意思是它应该打开到我的内容的右侧，并展开，而不是在下面。我说的那个，如果我做了一个不好的描述，我说的是右边的小横幅，当你点击它的时候，一个div展开，我想把它放在内容的右边。点击右边小横幅的按钮，上面写着：“退出我”，你会看到这个div展开，扩展div是我希望始终向右定位的div。“它似乎太宽，无法浮到这些元素的右侧，因此它位于元素下方。但是扩展div的宽度需要比其他div更宽。我可以使用javascript中的任何解决方法吗？：）但我需要“eas_sidekick_容器”的宽度为850。还有其他解决办法吗？也许是js？

<!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>

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