0

我正在尝试完成一些简单的事情，比如将 div 并排放置。问题是我在 CSS 方面非常有能力，但是我尝试使用的解决方案不能按预期工作，这就是问题所在。

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

显示：块；
向左飘浮;
右边距：15px；

它在本地完美地工作，问题是我将其创建为模板解决方案，将 html 和 css 构建到系统中，然后将生成到 javascript 标记。然后，javascript 标记将被投放到不同的网站，因此，它在所有浏览器中的作用相同非常重要。

然后我尝试将 div （放在一边的那个）定位到：absolute 并使用 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 和 Chrome，看看它们的区别以及它的行为有多奇怪。

单击右侧小横幅的按钮，说明：“退出我”，您会看到 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 解决方案。

我已经在所有浏览器中使用绝对位置来修复它，然后创建了一个 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);
    });
});
于 2013-02-06T14:03:49.740 回答