标签: css-float
Internet Explorer - 浮动Div之间的空间
我一直遇到Internet Explorer的演示问题.以下简单的代码块可以在Safari,FireFox,Chrome和Opera中呈现.但是,它会在IE6和IE7中的左右浮动DIV元素之间产生明显的空间.
我的问题是:是否有更正确的方法来实现浮动,以便相同的CSS在IE和我提到的其他浏览器中都能正常工作？如果没有,在Internet Explorer中摆脱空间的最佳方法是什么？
谢谢,马特
<style>
.left {
width:100px;
float:left;
border: solid black 1px;
}
.right {
width: 100px;
margin-left:100 px;
border: solid red 1px;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
由于这是一个社区维基.我以为我会使用Plan B提出的解决方案发布工作代码.
<style>
.left {
width:100px;
border: solid black 1px;
float:left;
}
.right {
width:100px;
border: solid red 1px;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="left">
a
</div>
<div class="right">
b
</div>
<div class="clear"></div>
c
推荐指数
解决办法
查看次数
在IE6中,如何将项目向右移动而不清除它？
在IE6中,HTML如下:
<div id="topmenu">
<ul>
<li>num 1</li>
<li>num 2</li>
</ul>
<div id="rightItem">Hello World</div>
</div>
CSS如下:
#rightItem {
cursor: pointer;
float: right;
clear: none;
height: 100%;
width: 340px;
}
#topmenu {
margin: 0 auto;
text-align: left;
width: 960px;
height: 41px;
}
它在除IE6之外的所有浏览器中将itemRight浮动到同一行(第一个UL然后是rightItem)的右侧.在IE6中,它是清除并向右浮动.我如何修复IE6？
推荐指数
解决办法
查看次数
选择框不浮动
我正在尝试创建一个包含 h1 和选择列表的基本标题栏 div。我希望选择列表位于 div 的最右侧，但将其向右浮动不起作用。有没有人有任何想法？代码很简单，但是看不出哪里出错了。谢谢！
<style type="text/css">
#select {
float: right;
}
h1 {
display: inline;
}
#titleBar {
width: 800px;
}
</style>
<body>
<div id="titleBar"><h1>Select Your Car </h1>
<select name="categories">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</body>
这是 jsfiddle 的链接：http : //jsfiddle.net/qhvDG/1/
推荐指数
解决办法
查看次数
CSS 有一个 div，它位于左 div 的右下方。div 在 HTML 中是反向的
描述有点混乱，但我有两个 div。一个位于页面左侧，一个通过浮动位于右侧。右边的在 HTML 中是第一个，左边的在第二个。基本上，我想拥有它，因此左侧 div 位于顶部，右侧 div 位于其下方。如果 HTML 中的 Left 和 Right 是按顺序排列的，那么就像删除浮动一样简单。但是，由于情况并非如此，我需要一点帮助。这是我设置的 jsfiddle：http : //jsfiddle.net/7bTjj/
推荐指数
解决办法
查看次数
如何在不同的包含 div 上创建叠加按钮
如何创建一个按钮，用 WSEDIT 类覆盖每个 html 元素。
首先，我知道我需要一个 javascript 循环来查找具有 css 类 WSEDIT 的每个元素，并动态创建一个按钮，并在每个具有 WSEDIT 类的元素中添加此按钮。
javascript循环和按钮创建示例
$(function()
$(".WSEDIT").each(function(){
var btnConfigure = $("<div class='BBtnConfigure'>");
$(this).prepend(btnConfigure);
});
);
<div class="WSEDIT" style="width:200px;height:400px;border:1px solid #000000">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
</p>
<div>
<div class="WSEDIT" style="width:200px;height:400px;border:1px solid #000000">
<h2>Sale For First Trimestriel</h2>
<img src="/graph.png" />
<div>
<div class="WSEDIT" style="width:200px;height:400px;border:1px solid #000000">
<table>
<tr><td>Name</td><td>Sex</td></td>Age</td<td>Country</td></tr>
...
</table>
<div>
这是我在下图中尝试执行的操作。
问题是，我的 btn 类按钮 BBtnConfigure 的 CSS 应该是什么
正如您在图片中看到的，BtnConfigure 与每个部分重叠。
推荐指数
解决办法
查看次数
在 DIV 上滚动后浮动一个 DIV
这是网址：检查这个网址
其中有一条带有订阅的红丝带，例如等。
它固定在顶部。我想要的是，只要有人滚动到页面顶部，丝带就应该开始漂浮在页面的顶部……如果他向上滚动，丝带就会开始并坐在它的位置上。
基本思想是功能区应该始终对用户可见。
如何在 CSS 中实现这样的东西？
推荐指数
解决办法
查看次数
让容器识别css浮动而不是自动调整高度
我试图浮动多个div(2图示,另一个将在以后添加).问题是,当设置为auto时,站点容器似乎忽略它们.我不确定容器css或者用于div的css是否有问题.我如何让网站容器识别浮动？提前致谢.
相关HTML:
<div id="storehours">
<div id="hoursheader"><p>Shop Hours</p></div>
</div>
相关CSS:
#storehours {
border: 1px solid black;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin-left: 11px;
margin-bottom: 15px;
width: 250px;
height: auto;
float: left;
}
(该代码用于右侧的div,左侧是相同但包含表单,我认为不是问题.)
编辑:更新了清除和固定的上限字母.还有同样的问题.
编辑2:澄清.html位于包含google地图的容器内.正如您所见,浮动使容器忽略它们,它们从容器的底部开始.我可以通过在容器上设置高度而不是自动将其固定来解决问题,但这是一个好习惯吗？
推荐指数
解决办法
查看次数
我的3个div没有正确排队.最右边的div被未定义的边缘推下来？
我在包装div中有3个div.在我的包装div中,我最左边的div是一个箭头图像,我用它来使用js在滑块之间导航.中间div是滑块,右侧div是移动到下一个滑块的右箭头.
这是滑块的代码:
<div class="twocol_double">
<div class="btn_left"></div>
<div id="slide_wrapper">
<div class="slide" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1;">
<h3>Heading1</h3>
<p>“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in vol</p>
</div>
</div>
<div class="btn_right"></div>
</div>
将有多个slide类,但为了问题我只添加了1.
出于某种原因,我的右箭头正在被推下来.在Chromes元素检查器中查看它在我的滑块div上有一个50px的右边距,我没有在任何地方定义(我看到橙色,但它没有CSS标记).
我在jsfildde中重新创建了这个问题:http: //jsfiddle.net/maZbF/1/ …
推荐指数
解决办法
查看次数
浮动元素有上边距
我已经提出了一个正确的元素,由于某种原因,它有一个优势.我不知道它来自哪里.
HTML:
<p>...</p>
<p class="foo">...</p>
<p>...</p>
<p>...</p>
CSS:
p.foo {
width: 500px;
float: right;
}
图片:
codepen.io:http://codepen.io/vbelenky/pen/oEmHt
推荐指数
解决办法
查看次数
HTML跨度的两面
我在LI中有一个SPAN,它在视觉上看起来很像(LI是400px宽,所以有很多空间):
[Name (age) ]
我希望(年龄)在右边,名字在左边:
[Name (age)]
我的代码库:
<li>
<span>John Smith(30)</span>
</li>
如何让它们都粘在边缘？
推荐指数
解决办法
查看次数