我正在尝试完成一些简单的事情,比如将 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/