动态大小的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 - 适合文本里面？

回答

相关问题