gpt4 book ai didi

iphone - 灵活或流畅的 CSS 布局

转载 作者:太空宇宙 更新时间:2023-11-03 19:35:11 27 4
gpt4 key购买 nike

通常对于大多数基于 DIV 的布局,我按以下方式对页面(外骨架)进行编码;

<body>
<div class="wrapper">
<div class="minwidth">
<div class="layout">
<div class="container">
<div class="content">
//Some content....
</div>
</div>
</div>
</div>
</div>
</body>

下面是我使用的CSS;

html,body{padding:0;margin:0;background:url(../images/bodybg.gif) #ececed left top repeat-x;color:#3b3b3b;font:normal 85% verdana}
.wrapper{width:99.8%;min-width:959px;margin:0 auto}
* html .minwidth{padding-left:959px}
* html .minwidth,* html .layout,* html .container,* html .content{height:1px}
* html .container{margin-left:-959px;position:relative}
.content{padding:0;margin:0 16px}

现在我必须承认,由于我更多地从事 UI 开发(而不是布局设计),所以我并不完全理解“为什么”实际使用了其中一些 div。我的猜测是,其中一些 div 被用作对旧 IE 缺乏最小宽度支持的 HACK。

所以我的问题是;

  1. Please let me know if the layout code above is standard and is required for cross-browser compatibility (assuming a certain min-width requirement as well)
  2. Do you think that so many divs were required only for min-width support in older IE and do the latest IE (like IE8/9) have full support for min-width?
  3. I now want to design a fluid layout i.e. one which should work seamlessly across multiple platforms (desktop/tablets like iPad and to certain extent mobile devices)
  4. Please suggest any other skeletal structure to ensure a fluid layout that would adjust well according to the screen resolution (desktop/tablet,etc)

最佳答案

1.

好吧,我从来没有见过这种在旧版浏览器上实现 min-width 的方法。


2.

不,这绝对没有必要。

如果你只对 min-width 感兴趣,这应该适用于 ie6。

http://www.cssplay.co.uk/boxes/width.html

下面是实现min-widthmax-width的方法。

http://cameronmoll.com/archives/000892.html


编辑:

因此,为了使这项工作在包括 ie6 在内的跨浏览器上运行,您可以像上面的示例一样做,除了最小宽度之外。为了最简单的 html 和 css,这将是可行的方法。

唯一的缺点是,如果访问者没有打开 JS,那么这什么都不做。如果一个人足够聪明以禁用 JS 而他仍然使用 ie6 那么我认为那是用户的问题..

http://jsfiddle.net/sr7WJ/ - 在第一个宽度值(带有 javascript 的那个)中有一些额外的值是至关重要的,我个人相信比实际值多 30 个...但他们说再多 2 个就足够了。在某些情况下,您可能需要针对 ie6 解决这个问题或使用条件注释。


3。/4.

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

http://www.maxdesign.com.au/articles/liquid/

关于iphone - 灵活或流畅的 CSS 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7219716/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com