个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在设计一个流畅的布局，并且正在考虑对布局进行编码的正确方法。下面是我正在考虑的结构；
<body>
<div id=container>
<div id=col1></div>
<div id=col2></div>
</div>
</body>
对于 CSS，我正在考虑将容器编码为 {width:90%;margin:0 auto;overflow:hidden}
对于 2 列，它们将向左浮动一些宽度 ..
如您所见，因为我想要一个流畅的布局，所以我没有在任何地方使用 px 值..
我的其他要求是；
1 它应该根据视口(viewport)自动调整，例如在台式机或 iPad(某种程度上是手机)上查看时，相同的 html 页面应根据视口(viewport)按比例调整。
2 它应该与大多数桌面浏览器和 iPad 兼容，并且将来可以轻松扩展到其他平板电脑。
3 页面应该居中对齐(不确定在 iPad 上是否有足够的空间)
请指出您认为可能由上述结构或 css 引起的任何问题..
如果我的 HTML 和 CSS 代码(特别是容器)编码正确，请提出建议。我有点担心是否正确，因为这将应用于近 500 多个 html ......所以我不知道想在稍后阶段讨论任何类型的重大问题..
请提出尽可能多的想法..我对所有想法都持开放态度..
谢谢你..
最佳答案
就其灵 active 而言，您可以很容易地做到这一点:
(我把样式留在了内联因为我现在很懒!)
<div id="container" style="width:90%; margin:0 auto; overflow:hidden">
<div id="col1" style="float:left; width:50%; background:#f90">COLUMN1</div>
<div id="col2" style="float:left; width:50%; background:#f00">COLUMN2</div>
</div>
容器上的 90% 宽度是视口(viewport)的 90%。列将是计算出的 90% 宽度的 50%，无论它是什么。
我会使用母版页或类似的，所以如果你确实需要改变周围的东西，你必须在每个 html 页面上应用它:)
此外，尽管列将是流动的，但您的内容可以确定最小宽度 - 例如如果您在一列中有一张 500 像素宽的图像，那么在调整大小时该列的最小宽度将为 500 像素，这可能会给您带来问题。简而言之，您需要考虑您将拥有的网站内容类型以及这可能会如何影响布局。
关于iphone - 关于流体布局的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7337617/
26
4
0
.mid{ margin:0 auto; max-width:10em; min-width:5em; border:1px solid red; } ... 此代码创
我想用 制作 4 列元素: 第1列的宽度需要固定为200px。 其他 3 列需要动态划分它们之间的剩余宽度。 Column 1 Fixed 200px Column 2 Fluid Column 3
好的，我看到了 static , fluid , static 布局，但现在我的设计需要fluid, static, fluid 布局。 如: +---------------------------
我有以下 2 列 div 布局。左列需要有 75px 的宽度以容纳图像，但右列需要流入其所有父容器。 这个网格位于一个用户控件中，该控件被添加到多个站点/页面，每个站点/页面都有不同的布局，因此父容器
在此fiddle ，我在 dark-blue 的包装器中有一个图像，我希望它相对于它的包装器水平和垂直对齐 70%。 我尝试使用 table-cell，但它似乎不起作用。 HTML:
在 CSS 中获得此布局的最佳方法是什么？想象一下，我有三个 div，两个 div 在另一个里面。在两个内部 div 中，第一个具有特定的宽度集，第二个 div 预计会占用剩余空间。 通常我会在第二列
我对流体有点陌生，我想在流体中创建以下 php 语句。 if ($var == 'something') { // do something } elseif ($other-var == 's
仅当属性值 fileEn 时，我才尝试输出我的元素为 NULL ( fileEn => NULL ) {file} 然而，这也向我展示了 fileEn 不是 NULL 的元素! 最佳答案
简短的版本:我有一个元素，我需要定义一个 DIV，它将水平重复，然后在空间不足时换行到下一行(类似表格的网格)。我见过提到 jQuery.GridLayout，但演示/主页是 404，所以我不知道这是
我想不通 - 但我相信有人可以...我正在研究将新的流体宽度设置为 100%，并为内容包装器设置最小和最大宽度。 当页眉区域未设置为 overflow:hidden 时会出现问题 - 会出现一个大的水
我正在为一部即将上映的电影设计一个网站，但在让它适应所有浏览器窗口大小和屏幕大小方面遇到了一些问题。本质上，例如初始页面的标记在页面顶部有电影 Logo ，在其下方有一个视频(电影预告片)，然后是一个
我正在构建一个由 50% 宽度的 div 和 25% 宽度的 div 组成的流动网站，我遇到的问题是对齐问题，尤其是与 Chrome。 我已经在这里上传了代码:http://tekulated.com
我正在尝试使用 twitter bootstrap 为我的网站做一个垂直的双色调背景(使用 css 渐变)，这样渐变在连续流体的跨度之间的排水沟的中心结束。我已经有了渐变代码(如下所示)，并且正在尝试
最近开始使用bootstrap，遇到如下问题:出现水平滚动条应该早得多。下面屏幕截图中的红色方 block 显示了表格旁边的空白区域没有填充任何信息，隐藏表/div。 HTML
我正在努力让这个布局稍微流畅一些。我希望#logo 位于#infobot 的右下角，其大小由我想随浏览器窗口缩放的图片决定。 #white 应该只是掩盖#logo 左侧的区域。如何让#white 和#
我们收到了一位客户的奇怪请求。他们想要一个特别的 的内容以图标为中心。居中本身不是问题，图标也不是。 问题是我找不到将 居中的方法s 的宽度可变，图标没有左对齐。 所以我们正在努力实现您在 http
我的网站有后台问题。我们的想法是不使用任何媒体查询，而是将所有内容都设置在 % 上，以便它始终可以在任何设备上查看。 我的问题是，背景图像确实具有适用于 with 的正确 css，但高度由 div 中
我正在对这个站点进行一些样式调整 http://neondataskills.org/ 我添加了一个顶部栏图像，现在，当您调整页面大小时，顶部栏图形如果太宽就会与导航重叠。我想强制图像将导航栏向下推。
我创建了一个带有面板和面板主体的容器。当我在桌面上查看该站点时，它看起来还不错。但是我在手机上看的时候，右边好像有一个很大的空间，什么也没有。 描述问题的图片 http://snag.gy/ApnWS
我有这样的布局: /*Sidebar*/ /*Column1*/ /*Column2*/ /*Column3*/ /*Sidebar*/ 所以现在我想做一个流畅的布局，在台式电脑上看起来不错，但在缩小
我是一名优秀的程序员,十分优秀！