動態大小的div - 適合文本里面？

我想創建一個基於瀏覽器的電子書閱讀器，使用.epub文件中的.xml文件作爲內容。動態大小的div - 適合文本里面？

現在的事情是，一本書有2頁要看，我遇到一些問題重建它的各種屏幕尺寸。特別是字體。根據屏幕尺寸，以及在最大化/全屏/調整大小的情況下動態調整，字體應相應更改以適合兩頁正好。

下面是我嘗試過的一些代碼。

#left{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 50%; // so a variable width. 
 
    height: 100%; 
 
} 
 
#right{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 50%; 
 
    width: 50%; 
 
    height: 100%; 
 
}

<body> 
 
    <div id="left">Half page of text</div> 
 
    <div id="right">Other half page of text</div> 
 
</body>

來源

2015-04-06 Condor

請提供相關代碼 –

讓我們看看你已經嘗試過，所以我們可以提供幫助。 –

在這裏，您將添加源代碼。 – Condor

事情約2 display:inline列50％是與某些瀏覽器（啊哈：IE）％50不總是50％。所以，你會有隨機的情況下，列不能正確流動，你的佈局是頂起來的。請記住，如果您製作自制解決方案，您還必須考慮保證金和填充。

我個人的偏好是與網格系統，所有這些錯誤敲定出來。有一噸 - Bootstrap有一個很好的，960 grids獨立井。

下面是與960.gs例如一個例子：

<div class="container_12"> 
    <div class="grid_6 left"> 
    Left Column 
    </div> 
    <div class="grid_6 right"> 
    Right Column 
    </div> 
</div>

就是這樣....很簡單。簡而言之，您將採取一個.container-12，它將像表格中的一行那樣有12列。然後你輸入兩個div，分別是.grid-6，或者每個.container-12的一半。如果你想要一個四分之三，四分之三的佈局，你會做.grid-3和.grid-9網格自動適應尺寸，因爲瀏覽器調整大小的百分比與邊距和填充適應。

Bootstrap更進一步，讓您只需根據尺寸更改佈局。例如，在電腦屏幕上可以並排放置，而在iPad或iPhone上則可以放在另一個之上。同樣，你可以用原生CSS做到這一點，但這並不容易。

來源

2015-04-07 21:43:34 bpeterson76

動態大小的div - 適合文本里面？

回答

相關問題