填充浮动div而不移动其他div

我试图左侧填充“后退”div 30px，但没有从中心轻推“head”div。不可能似乎得到它的权利。 http://jsfiddle.net/bZeD9/填充浮动div而不移动其他div

<div class='header top'> 
    <div class="back">&lt;</div> 
    <div class="head">HEADER HERE</div> 
</div> 

.header { 
    background: none repeat scroll 0 0 #4A4A4A; 
    text-align: center; 
    color: #F1F1F1; 
    line-height: 45px; 
    padding-top: 3px; 
    font-size: 20px; 
    font-weight: 100; 
} 

.back { 
    float: left; 
}

来源

2013-02-26 Mitchell Weiss

使用position:absolute

.back { 
    position:absolute; 
    left:30px; 
}

DEMO

来源

2013-02-26 12:24:12 Sowmya

传说！谢谢。我知道这将是简单的事情，就像那个 – 2013-02-26 12:25:50

@MitchellWeiss u r wlcm。不要忘记添加位置：相对于父div，正如我在小提琴中提到的 – Sowmya 2013-02-26 12:26:28

设置其定位相对并添加左：30PX;

.back { 
    float: left; 
    position: relative; 
    left: 30px; 
}

http://jsfiddle.net/jeffshaver/bZeD9/4/

来源

2013-02-26 12:25:28

添加

padding: 3px 30px 0;

的CSS为.header

然后，你将有两个在右侧，左侧填充，所以如果你对某些原因会把东西放在标题div的右端，这也会自动从边缘放置30px。我还将3px添加到顶端，因为您已经拥有该顶端，所以您可以删除padding-top。

我通常宁愿使用这种解决方案，而不是绝对定位，也可以，但更加静态，我觉得难以维护和改变，这是我个人的看法。

来源

2013-02-26 12:34:09 Millenjo

填充浮动div而不移动其他div

回答

相关问题