javascript - 如何并排放置 2 个 div(替代解决方案)

标签 javascript html css tags

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

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

display: block;
float: left;
margin-right: 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,看看它们的区别及其行为有多么奇怪。

单击右侧小横幅的按钮:“exiting me”,您将看到 div 展开,展开的 div 是我一直想放在右边的那个。

希望你能帮帮我! :)

最佳答案

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

关于javascript - 如何并排放置 2 个 div(替代解决方案),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14728439/

相关文章:

javascript - 无法从 Javascript addEventListener 方法调用 jQuery POST 请求

html - Bootstrap 背景图片

css - 浏览器支持边距 : auto

html - 是否也可以为移动 iOS 和 Android 自定义选择按钮?

javascript - 通过改变类滑下动画

javascript - 如何检测 YouTube 已从注入(inject)的脚本(使用 chrome 扩展)完成视频播放?

javascript - 无法使用 SonarQube 分析 Javascript 文件

android - 禁用 Android 浏览器的输入覆盖?

jquery - 使用jquery添加依赖于其他html的html

javascript - 图像映射区域无法触发点击事件。afer 最大化寡妇或恢复窗口点击事件触发