填充浮動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

回答

相關問題