双列布局 [英] Two-column layout
问题描述
嗨！
我遇到了两列布局的问题 - 显然我
不是第一个人，但解决方案我发现在GG没有
给我我想要的东西。
页面应该如下：
................................
.. + ----- ----- + ------- +。
..我是Logo +口号。
.. + ---- + ---- - + ------- +。
.. III。
.. INII。
.. II内容我。< br $>
.. + ---- +我。
.. II。
.. II。
。 .II。
.. + --------------- +。
........... ...........................
我想在左边有主导航（N），扩展
尽可能多地下降。主要内容应该是
菜单，占用剩余空间。
首先尝试：
我基本上用单独的浮动DIV做了这个，并且只用了一个Lorem ipsum就可以了。
在里面。但随着内容文字的增长
更长，DIV被包裹并放置在导航下方。
嗯，这种效果还可以，如果确实没有足够的空间来容纳内容层（即在手持设备上）。但在这种情况下，它只需要b $ b足以做正常的自动换行（剩下的屏幕宽度的66％至少为
）。
第二次尝试：
然后我创建了一个容器层（clear：both;），持有
导航（浮点数：左边; EM中的宽度）和内容（边距为
EM）。这或多或少都有效。但现在问题是
内容层永远不会换行，所以大字体大小的菜单将会占用所有空间并且页面不再可读。
所以我现在正在寻找一种告诉内容层的方法：尽可能宽地b / b
，如果你不能至少x EM宽，那么go
down。 min-width的使用是可以的，但是尽可能宽
不起作用。或者，有一种100％
减去导航宽度会很好。有什么帮助吗？
非常感谢你。亲切的问候
Philipp
Hi!
I am experiencing a problem with a two-column layout -- apparently I
am not the first person, but the solutions I found in GG did not
give me what I was looking for.
The page should be as follows:
................................
.. +----------+-------+ .
.. I Logo + sloganI .
.. +----+-----+-------+ .
.. I I I .
.. I N I I .
.. I I content I .
.. +----+ I .
.. I I .
.. I I .
.. I I .
.. +---------------+ .
................................
I want to have the main navigataion (N) on the left, expanding
downwards as much as necessary. The main content should be right of
the menu, taking the remaining space.
FIRST TRY:
I basically did this with individual floating DIVs and it worked OK
with just a "Lorem ipsum" in it. But as the content text grew
longer, the DIV was wrapped and placed below the navigation.
Well, this effect is OK, if there really is not enough space to hold
the content layer (i.e. on a handheld device). But in that case, it
would have been enough to do normal word-wrapping (there was at
least 66% of the screen width left).
SECOND TRY:
I then created a container layer (clear: both;), holding the
navigation (float: left; width in EM) and the content (margin in
EM). This works more or less. But now the problem is that the
content layer does never wrap, so with big font size the menu will
eat up all space and the page is not readable anymore.
So I am now looking for a method to tell the content layer: "Be as
wide as you can and, if you cannot be at least x EM wide, then go
down". The usage of min-width is OK, but the "as wide as you can"
does not work. Or, it would be nice to have some kind of "be 100%
minus the width of the navigation". Any help?
Thank you very much. Kind regards
Philipp
推荐答案
On Thu，2006年5月4日12:38:28 +0200，Philipp E. Imhof < pu **** @ fippu.ch>
写道：
On Thu, 04 May 2006 12:38:28 +0200, Philipp E. Imhof <pu****@fippu.ch>
wrote:
页面应如下：
。 ..............................
。 + ---------- + ------- +。
。我Logo +口号。
。 + ---- + ----- + ------- +。
。我是我。
。我是我。
。我满足于我。
。 + ---- +我。
。我。
。我。
。我。
。 + --------------- +。
............................ ...
The page should be as follows:
...............................
. +----------+-------+ .
. I Logo + sloganI .
. +----+-----+-------+ .
. I I I .
. I N I I .
. I I content I .
. +----+ I .
. I I .
. I I .
. I I .
. +---------------+ .
...............................
给内容框一个比你的
导航框更宽的左边距（比如10em;）。绝对将导航框定位在
左边距并修复其宽度（例如8 em）。您的主要内容和导航之间将保持2em间隔
。到目前为止内容框是液体
，宽度适应
浏览器的视口宽度。无需在导航下面。或者我误会了
你呢？
-
______PretLetters：
|博客| http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
| zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Give the content box a left margin just a bit more wide than is your
navigation box (say 10em;). Absolutely position the navigation box at the
left margin and fix its width (at say 8 em). There will remain a 2em gap
between your main content and your navigation. The content box is liquid
in so far that the width adapts to the width of the view port of the
browser. No need to go underneath the navigation. Or do I misunderstand
you?
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Barbara de Zoete schrieb：
Barbara de Zoete schrieb:
给内容框一个比你的
导航更宽一点的左边距盒子（比如10em;）。绝对将导航框定位在左边距并固定其宽度（例如8 em）。您的主要内容和导航之间仍然存在2em的差距。到目前为止，内容框是液体，宽度适应浏览器视口的宽度。无需在导航下面。或者我是否误解了你？
Give the content box a left margin just a bit more wide than is your
navigation box (say 10em;). Absolutely position the navigation box at
the left margin and fix its width (at say 8 em). There will remain a 2em
gap between your main content and your navigation. The content box is
liquid in so far that the width adapts to the width of the view port of
the browser. No need to go underneath the navigation. Or do I
misunderstand you?
我试过这个。关键是，我*要*导航下面的内容框
，一旦它太小而无法读取。
但是，只要它足够大，我当然希望在导航旁边有它b / b
。
我已经尝试过你的变种了。它有效，但是由于
的限制，内容不能再在导航下了。
也许根本不可能做我想做的事，我不喜欢不知道。对我来说，
似乎问题是内容框的宽度是计算的b
的方式。浏览器想要扩展它超过必要（我认为
想到100％）所以它包装好了。
但是如果我定义了最大宽度x％，还有另一个问题：一旦
内容低于导航（我想要它），max-width
阻止它填写整个宽度。
这就是为什么我正在寻找一些表达告诉DIV
它应该是*的原因。宽（如几年前的框架）:(宽度减去
导航），如果没有包裹，和（宽度）包裹。
Philipp
I tried this. The point is, that I *want* to go the content box
below the navigation, once it would be too small to be readable.
However, as long as it is large enough, I of course want to have it
next to the navigation.
I have already tried your variant. It worked, but with the
limitation that the content cannot go under the navigation anymore.
Maybe it is just impossible to do what I want, I don''t know. For me,
it seems that the problem is the way the content box'' width is
calculated. The browsers want to expand it more than necessary (I
think to 100%) and so it wraps.
But if I define a max-width of x%, there is another problem: Once
the content goes below the navigation (as I want it to), max-width
prevents it from filling out the entire width.
This is why I was looking for some expression telling the DIV that
it should be "*" wide (as with frames some years ago): (width minus
navigation), if not wrapped, and (width) when wrapped.
Philipp
2006年5月4日星期四14:27:06 +0200，Philipp E. Imhof< pu **** @ fippu.ch>
写道：
On Thu, 04 May 2006 14:27:06 +0200, Philipp E. Imhof <pu****@fippu.ch>
wrote:
Barbara de Zoete schrieb：
Barbara de Zoete schrieb:
给内容框一个比你的
导航框更宽的左边距（说10em;）。绝对将导航框定位在左边距并固定其宽度（例如8 em）。您的主要内容和导航之间仍然存在2em的差距。到目前为止，内容框是液体，宽度适应浏览器视口的宽度。无需在导航下面。或者我是否误解了你？
Give the content box a left margin just a bit more wide than is your
navigation box (say 10em;). Absolutely position the navigation box at
the left margin and fix its width (at say 8 em). There will remain a 2em
gap between your main content and your navigation. The content box is
liquid in so far that the width adapts to the width of the view port of
the browser. No need to go underneath the navigation. Or do I
misunderstand you?
我已经尝试过你的变种了。它有效，但有限制，内容不能再在导航下了。
I have already tried your variant. It worked, but with the
limitation that the content cannot go under the navigation anymore.
在这种情况下，创建一个具有完全相同尺寸的空盒子如
导航框所示，并将其浮动在导航框下方。现在，如果内容太宽而无法放在导航框旁边（以及它下面的浮动），
它会移到下面。丑陋的黑客，但可能有用。
-
______PretLetters：
|博客| http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
| zweefvliegen | http://www.pretletters.net/html/vliegen.html |
In that case, create an empty box with exactly the same dimensions as the
nav box has, and float it underneath the nav box. Now, if the content is
too wide to fit next to the nav box (and the float that is underneath it),
it will move below. Ugly hack, but possibly useful.
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
这篇关于双列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
