div內的div CSS樣式 - 使用填充來居中內部div的外部？

Question

所以我有2個div，1個在另一個之內。 #outer最外面的div和#frame div＃w /在#outer中。

關於#outer，我已經應用了一個背景圖片來佔據整個瀏覽器空間。

框架是文本將去的地方 - 文本會隨着不同的字符串長度而不斷變化。但是，我只希望#frame佔據#outer的中心部分，以便文本不會泄漏到外面（這是因爲#outer中的背景圖片有黑板般的圖形 - 我希望它看起來好像文本是被寫在黑板上而沒有在文字外面出現文字）。

我應該使用填充這個權利？像在#frame中設置padding屬性的權利？或者我應該調整框架的寬度？我如何集中這個吸盤？！浮動？墊？我迷路了......

HTML：

<div id='outer'> 
    <div id='frame'> 
    </div> 
</div> 

CSS：

#outer { 
height: 612px; 
background: url('http://i151.photobucket.com/albums/s147/yungottii/abveaspi_background_final.png') no-repeat 0 0 scroll; 
background-size: 100%; 
} 

#frame { 
text-align: center; 
height: 612px; 
padding: 50px; 
overflow: auto; 
font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; 
font-size: 60px; 
color: black; 
} 

我已經搞亂與填充和邊框和利潤在過去的時間試圖讓一抓一般的箱子模型。任何人都可以幫助我完成這個任何快速指針？

PS這可能是很難看到的辯論，因爲這可能不是你的瀏覽器設置完全兼容，但你可以去：

http://www.abveaspirations.com

，看看上面的代碼，目前隨地吐痰出。正如您可能看到的，特別長的字符串/文字泄漏到玻璃外部。 BTW我使用textualizer插件，不知道這改變任何東西......

Answer 1

這比複雜一點的答案要複雜得多。這可以通過填充完成，但是我覺得這種方法對於你正在做的事情來說是最順利和最穩定的結果，對於響應式網站也非常有效，所以在您縮放屏幕尺寸時不會中斷。

下面是這個動作的演示，所以你可以隨着我在說什麼跟着，看完整的代碼在同一時間：

http://jsfiddle.net/9FtFh/1/

好了，所以首先，剛設置你的外部股利，我基本上只設置position: relative;就可以了，其他一切都很好。這只是因爲我將框架設置爲position: absolute;，我希望它相對於這個外部div。

之後，讓我們看看變化框架...

position: absolute; 
top: 10%; 
bottom: 20%; 
left: 15%; 
right: 15%; 

這些樣式服務拉伸div的界限出某些點的目的。請注意，框架元素上沒有設置高度或寬度，必須將其取出。基本上，這些樣式表示div的頂部將從外部div的頂部起10％。底部將是從外部底部的20％..等等。我使用百分比而不是像素，因爲這將確保定位適應屏幕的任何寬度。

請注意，我在框架上設置了一個虛線邊框，以便您可以隨時查看框的大小和位置。

我並不擔心文本內容的垂直居中，因爲我相當肯定您的文本效果插件可以處理該問題。只要讓我知道，如果我在這方面是錯的，我可以擴大這一點。

現在，還有一個挑戰是，一旦屏幕達到一定的尺寸，圖像開始比外部容器的高度更小。這可能不是你想要的東西，所以我加了一個媒體查詢：

@media only screen 
and (max-width: 1060px) { 

    #outer { 
     height: 0; 
     padding-top: 47.85%; 
    } 

} 

這樣做是適用的風格後，才顯示屏變是一定的寬度。我根據圖像開始縮小容器邊緣的點來選擇最大寬度。

至於應用的樣式，這是保持容器長寬比在重新調整大小時的一個小技巧。我將height設置爲0，然後使用padding-top重新創建高度。我使用的數字（47.85％）是圖像高度與寬度的近似比率。 （圖像寬度高達47.85％。）現在，這將開始縮放整個容器與屏幕，以匹配圖像。因爲你的框架是絕對定位的，所以它會留在周圍，並保持它基於百分比的位置。

有一件事我沒有做，你可能會感興趣的是設置另一個媒體查詢一旦圖像寬度開始變得非常寬，底部被切斷。此時，您可以將框架底部設置爲0%，以便與其匹配。 （您可能還需要定期更新top屬性，因爲屏幕變得越來越寬，這只是因爲您的設置高度會切斷圖像，使得百分比無關緊要。）

在該示例中，我鏈接到，請嘗試重新調整底部框架寬度的大小，並觀察虛線如何保持正確的位置，並調整內部的內容。同時注意容器如何保持設定的高度，直到圖像太小，然後所有東西都開始縮小。

我只能看到一個明顯的問題，那就是因爲所有的文本內容都被逐個字母地定位，重新調整屏幕大小會導致元素溢出，直到出現新的幻燈片，並且字母根據新的寬度重新定位。這只是要繼續前進的事情。

Answer 2

選項1 http://jsfiddle.net/bdbpY/

#outer { 
    background-size: 100% 100%; 
} 

和它的作品。唯一的問題是它會將圖像的高度/寬度更改爲您想要的以外的其他東西。

---

選項2 http://jsfiddle.net/bdbpY/1/

另一種選擇這可能會更好地工作，這是

#frame { 
    height: 100px; 
    overflow: hidden; 
} 

這工作你想怎麼。

如果你打算爲可調寬度，而不是一個固定的像素，可以比嘗試像

#frame { 
    max-height: 50%; 
    overflow: hidden; 
} 

---

選項的東西3 http://jsfiddle.net/qLNFz/

這可能是最好的選擇，和最簡單的。

我所做的只是這個

#frame { 
    height: 29%; 
    padding: 10px 20px; 
} 

Answer 3

HTML

<div id='outer'> 
    <div id='frame'><span class="sp">Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample Sample </span> 
    </div> 
</div> 

CSS

* { 
    margin:0px; 
    padding:0px; 
} 
#outer { 
    background: url('http://i151.photobucket.com/albums/s147/yungottii/abveaspi_background_final.png') no-repeat 0 0 scroll; 
    background-size: 100% 100%; 
    width:1000px; 
    margin:0px; 
} 
#frame { 
    margin:20px auto; 
    text-align: center; 
    width:600px; 
    height:400px; 
    padding: 50px; 
    overflow: hidden; 
    font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif; 
    font-size: 60px; 
    color: black; 
    border:1px solid black; 
} 
.sp { 
    overflow:hidden; 
} 

Demo

Answer 4

我已經使用overflow:hidden;作爲長文本以適應框架。所以你的板子會是這樣的http://jsfiddle.net/3pNSx/70/