Pau*_*ite 28 css internet-explorer css-float
我有一个父母div漂浮在左边,有两个孩子div,我需要向右漂浮.
父母div应该(如果我理解正确的规范)与包含孩子div的需要一样宽,这就是它在Firefox等人的表现.
在IE中,父级div扩展到100%宽度.这似乎是浮动元素的问题,这些元素可以让子项正确浮动.测试页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Float test</title>
</head>
<body>
<div style="border-top:solid 10px #0c0;float:left;">
<div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
<div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>
</html>
不幸的是我无法修复子divs 的宽度,因此我无法在父级上设置固定宽度.
是否有一个仅限CSS的解决方法,使父母div像孩子一样宽div？
cry*_*ryo 12
这是一个inline-block在IE6上工作的解决方案,如http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/,使元素的行为更像是右浮动的<div>s:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Float with inline-block test</title>
<style type="text/css">
.container {
border-top: solid 10px green;
float: left;
}
.tester1,
.tester2 {
float: right;
}
.tester1 {
border-top: solid 10px blue;
}
.tester2 {
border-top: solid 10px purple;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.container {
text-align: right;
}
.tester1,
.tester2 {
float: none;
zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="tester1">Tester 1</div>
<div class="tester2">Tester 2</div>
</div>
</body>
</html>
我想出了一个使用text-align: right和的解决方案display: inline.
试试这个:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="margin-top: 10px; text-align: right;">
<div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
<div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
</div>
</div>
注意我必须切换标记中"tester"框的顺序,以便以与示例相同的方式显示.我认为在新容器上有一个替代品,即margin-top,但我现在没有时间研究.
如果你想要所有其他浏览器的清洁样式,试试这个:
<div style="border-top:solid 10px #0c0; float: left;">
<div style="float: right;">
<div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
<div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
</div>
</div>
当您想要围绕这些框布局内容时,可能会出现一些不同的问题.但是,我认为这些问题比这个问题更容易解决.
希望这对你有所帮助.
| 归档时间： |
|
| 查看次数： |
22048 次 |
| 最近记录： |