块元素布局 - 如何? [英] block element layout - how?

查看:56
本文介绍了块元素布局 - 如何?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你好吗?我要求创建布局的一点帮助,比如

这个:


13px 500px 13px

..---- -------------------------------------------------- ------。

| | | | | | 13px

| ---- + ---------------- +中心区域。 + ---------------- + ---- |

| |空的空间。 |主要网站|空的空间。 | |

| |身高和|窗口。 |身高和| |

| |宽度取决于|宽度取决于|

| |在中心| |在中心| |

| |区域。 | |区域。 | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| ---- + ---------------- + + ---------------- + ---- |

| | | | | | 13px

''-------------------------------------- ----------------------''


\ ------------ --------------。 .---------------------------- /

\ /

100 %宽度


i尝试了很多种可能性,试图解决它整晚的问题

但没有运气......;(

总是它的某些部分是错误的(在IE中几乎总是如此)。如果有人可以

节省他的空闲时间并看看这个我真的真的很好

感谢。


问候。

解决方案

waste写道:

这样的布局:

13px 500px 13px
.-------- -------------------------------------------------- - 。
| | | ||| 13px
| ---- + ---------------- +中心区域。+ ----- ----------- + ---- |
| |空格。|主要网站|空格。| |
| |高度和窗口。身高和| |
| |宽度取决于|宽度取决于|
| |在中心| |在中心| |
| |区域。 | |区域。 | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| ---- + ---------------- + + ---------------- + ---- |
| | | | | | 13px
''------------------------------------------ ------------------''

\ -------------------- ------。 .---------------------------- /
\ /
100%宽度

我正在尝试很多可能性,试图在整个晚上解决它
但没有运气......;(总是它的某些部分是错误的(在IE中几乎总是如此)。如果有人可以
请你腾出空闲时间看看这个我真的非常感激。




你想要的宽度是什么问题:


html:

< div id =" container">

< div id ="页面">

此处您的实际网页内容

< / div>

< / div>

css:

身体{

保证金:0;

填充:13px;

}

#container {

text-align:center; / * for Win-IE5 * /

}

#page {

宽度:500px;

保证金:0自动;

text-align:left; / *反击上面的值* /

}


你想要的高度并不是那么容易:在顶部它很简单,但是

使所有页面停在13px从底部开始,无论内容的高度是多少还是浏览器窗口的高度都是

不可能的imo。有些方法可以让页面延伸到窗口底部

,因为它们太短,但不能可靠地跨浏览器,

而且我不是我觉得我已经遇到过在底部包含13px空白空间

的方法。 (虽然不是很努力)


只需放弃并开始思考网页而不是长方形

带边距的盒子。


-

Els http://locusmeus.com/

Sonhos vem。 Sonhos v?£。 O resto ?? crisfeito。

- Renato Russo -


waste写道:

你好。我正在寻求一些帮助来创建像
这样的布局:



这是一个基本的3列布局。具体来说,你尝试了什么?并且

和显示你最好努力的URL会有很大的帮助。

-

jmm(连字符)列表(at)sohnen-moe( dot)com

(删除电子邮件的.AXSPAMGN)


waste写道:

你好。我正在寻求帮助创建布局,例如
这个:




只需浮动左边的东西,左边浮动正确的东西,右边和

允许中心物品在两者之间流动。


-

Gus

hello there. i am asking for a little help with creating layout like
this:

13px 500px 13px
..------------------------------------------------------------.
| | | | | | 13px
|----+----------------+ center area. +----------------+----|
| | empty space. | main website | empty space. | |
| | height and | window. | height and | |
| | width depends | | width depends | |
| | on the center | | on the center | |
| | area. | | area. | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
|----+----------------+ +----------------+----|
| | | | | |13px
''------------------------------------------------------------''

\--------------------------. .----------------------------/
\/
100% width

i was trying many of possibilities, trying to solve it for all evening
but with no luck... ;(
always some part of it is wrong (in IE almost always). if someone could
spare his free time and take a look on this i would be really really
grateful.

regards.

解决方案

waste wrote:

hello there. i am asking for a little help with creating layout like
this:

13px 500px 13px
.------------------------------------------------------------.
| | | | | | 13px
|----+----------------+ center area. +----------------+----|
| | empty space. | main website | empty space. | |
| | height and | window. | height and | |
| | width depends | | width depends | |
| | on the center | | on the center | |
| | area. | | area. | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
|----+----------------+ +----------------+----|
| | | | | |13px
''------------------------------------------------------------''

\--------------------------. .----------------------------/
\/
100% width

i was trying many of possibilities, trying to solve it for all evening
but with no luck... ;(
always some part of it is wrong (in IE almost always). if someone could
spare his free time and take a look on this i would be really really
grateful.



What you want wrt to the width is no problem:

html:
<div id="container">
<div id="page">
Your actual page content here
</div>
</div>

css:
body{
margin:0;
padding:13px;
}
#container{
text-align:center; /* for Win-IE5 */
}
#page{
width:500px;
margin:0 auto;
text-align:left; /* countering the value above */
}

What you want in height isn''t that easy: at the top it''s simple, but
to make all pages stop at 13px from the bottom, regardless of the
height of the content or the height of the browser window is
impossible imo. There are ways to get pages to extend till the bottom
of the window when they''re too short, but not reliably cross browser,
and I don''t think I''ve come across a way to include a 13px empty space
at the bottom yet. (not tried very hard though)

Just give it up and start thinking in web pages instead of rectangular
boxes with margins.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos v?£o. O resto ?? imperfeito.
- Renato Russo -


waste wrote:

hello there. i am asking for a little help with creating layout like
this:


It''s a basic 3 column layout. What, specifically, have you tried? And
and URL showing your best efforts would help a lot.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)


waste wrote:

hello there. i am asking for a little help with creating layout like
this:



Just float the left stuff, left and float the right stuff, right and
allow the center stuff to flow between the two.

--
Gus


这篇关于块元素布局 - 如何?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

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