<html>
<head>
<style>
.wrap{
????background:#ccc;
????float:left;
????position:relative;
????left:50%;
????}
.wrap-center{
????position:absolute;
????left:-50%;
}
</style>
</head>
<body>
<div?class="wrap">
????<div?class="wrap-center">我們來學習一下這種方法。</div>
</div>
</body>
</html>在.wrap-center中，為何我設(shè)置為absolute后效果是這樣的:而只能設(shè)置為relative后才能達到我想要的效果:
3 回答
qq_青棗工作室_0
TA貢獻446條經(jīng)驗 獲得超754個贊
<html>
<head>
<style>
.wrap{
????background:#ccc;
????position:absolute;
????left:50%;
????}
.wrap-center{
????margin-left:-50%;
}
</style>
</head>
<body>
<div?class="wrap">
????<div?class="wrap-center">我們來學習一下這種方法。</div>
</div>
</body>
</html>-
慕粉4241372請問我使用你這個代碼 把.wrap{}中塊成relative就沒效果了，這是為什么？ -
qq_青棗工作室_0如果使用了float或position:absolute，div的寬度由其內(nèi)容撐開，否則，默認會占滿父元素。所以，你把absolute去掉并改為relative后，wrap div的寬度會占滿body。此時，你再指定個width:300px，可以對比一下效果。
添加回答
舉報
0/150
提交
取消