创建两列布局 - html / css语义 [英] Creating two columns layout - html/css semantics

查看:133
本文介绍了创建两列布局 - html / css语义的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想创建一个非常简单的液体布局与2列 - 左边的一个将有一个固定的宽度,右边的一个将取决于窗口的大小。

I want to create a very simple liquid layout with 2 columns - the one to the left will have a fixed width, and the one to the right will be dependent to the window size.

布局将包含4个元素 - 标题,导航,内容和页脚。

The layout will contain 4 elements - the header, navigation, content, and the footer.

我有几个问题根据语义HTML5元素。

I have a couple of questions according to the semantics of HTML5 elements here.

这是代码:

<body>
   <div id="container">
       <header>
          <div id="header">
             sadfsdf
          </div>
       </header>
       <nav>
          <div id="nav">
             gdfsgf
          </div>
       </nav>
       <article>
          <div id="article">
             gdffgdg
          </div>
       </article>
       <footer>
          <div id="footer">
             gdfsgf
          </div>   
       </footer>
   </div>
</body>

1)容器div真的有必要吗?我做的是:
HTML有字体/ lineheight属性
BODY有一些边距和背景图片
CONTAINER包含其余

1) Is container div really necessery? What I do is: HTML has font/lineheight properties BODY has some margins and background images CONTAINER contains the rest

没关系

2)内部div在头文件,导航,...有必要吗?它们在那里,因为我可以改变填充,边距和边框,而不改变元素的宽度。是否应该随着每次更改设置此宽度?

2) Are inner div's in header, nav, ... necessary? They are in there because I can then change padding, margins and borders without changing the width of the element. Should I rather set this width along with every changes?

推荐答案

1)如果容器div需要或非依赖你的实际设计,但从我可以看到你所展示的,这不是真的有必要。什么是身体的东西?

1) If the container div is needed or not depends very much on your actual design, but from what I can see from what you have showed, it is not really necessary. What is body stuff?

2)你自己回答了你的问题。如果你想防止溢出,因为padding,margin,border,保持它。

2) You have answered your question yourself. If you want to prevent an overflow because of padding, margin,border, keep it.

这篇关于创建两列布局 - html / css语义的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆