下面,我想改变CSS使得right-sibling在真正的中心containerDIV.(编辑:不使用绝对定位).
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
}
#left-sibling {
float: left;
}
#right-sibling {
text-align: center;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs</div>
</div>
</body>
</html>
在目前的实现中,右兄弟的定心受左兄弟-您可以通过添加看到这个display: none给left-sibling的风格.
(注意:我想避免修改HTML结构,因为据我所知,CSS的重点是将标记结构与表示逻辑分离,这似乎不是一个非常疯狂的CSS请求处理.)
TIA.
我过去常常使用的一个技巧就是在容器的左边有填充物,我们可以通过给它一个相等但负的边距来鼓励左兄弟坐在这个空间内.
为了完成图片,我们还在容器的右侧放置了与左侧兄弟宽度相同的填充.
<html>
<head>
<style type='text/css'>
#container {
width: 500px;
padding-left:50px;
padding-right:50px;
}
#left-sibling {
border: solid 1px #000;
float: left;
width:50px;
margin-left:-50px;
}
#right-sibling {
border: solid 1px #000;
text-align: center;
}
#container2 {
width: 500px;
}
</style>
</head>
<body>
<div id='container'>
<div id='left-sibling'>Spam</div>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
<div id='container'>
<div id='left-sibling' style="display:none;">Spam</div>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
<div id='container2'>
<div id='right-sibling'>Eggs<br />Eggs<br />Eggs<br /></div>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
1908 次 |
| 最近记录： |