如何进行多列布局，其中列大小适合内容？ [英] How to do a multicolumn layout where the columns size to fit the contents?
问题描述
你好，
对不起，如果这个被覆盖在某个地方，但我看过无数网站
解释如何在CSS中进行多列布局，但是还没有找到
做我想要的东西。
在过去，我会用这样的东西（故意小的
片段的空中代码，所以没有关于有效性的评论请!!）制作
a两栏布局，其中左栏是（比如说）网站链接...
< table border =" 0" CELLPADDING = QUOT; 0" CELLSPACING = QUOT; 0" width =" 100％">
< tr>
< td align =" left" valign =" top">
< small>
< a href =" ..."> Ferrets< / a>
< br>< a href =" ..."> Gibbons< / a>
< br>< a href =" ... "> Voles< / a>
< / small>
< / td>
< td align ="左" valign =" top">
这是主要内容的来源......
< / td>
< / tr>
< / table>
这样做的好处是左栏只有足够宽
到适合链接，右栏将扩展以填充窗口的其余部分（假设它当然有足够的内容）。
我一直在希望在CSS中做这样的布局，但看不出如何。所有
我见过的例子都是使用DIV作为列，并浮动它们。他们
将左边DIV的宽度设置为固定值（以像素为单位），ems，
等，或者以百分比形式设置。无论哪种方式，左栏的宽度都是
，与内容无关。如果链接的文本都很短，
则会在左栏中浪费空间。如果有很长的文本，那么它们会溢出DIV并溢出到右栏。
有没有办法设置它以便左列是只有内容需要
那么宽，而正确的则使用其余内容？就像我说的那样，我已经搜索和搜索了
，我已经跟踪了这个
组中帖子的大量链接，但我还没有找到布局与旧的
表格一样灵活。如果有人能指出正确的
方向，我将非常感激。
TIA
-
Alan Silver
（此行下面添加的任何东西都与我无关）
< blockquote> Alan Silver写道：
这样做的好处是左栏只有足够宽以适合链接，右栏将扩展以填充窗口的其余部分（假设它当然有足够的内容）。
我一直在寻找在CSS中进行这样的布局，但是看不出来。所有我见过的例子都使用DIV作为列，并浮动它们。他们将左侧DIV的宽度设置为固定值（以像素为单位），ems，
等，或者以百分比形式设置。无论哪种方式，左栏的宽度都与内容无关。如果链接的文本都很短，那么你就会在左栏中浪费空间。如果有长文本，它们会溢出DIV并溢出到右栏。
< http://css-discuss.incutio.com/>
< http://www.csszengarden.com/>
< http://www.positioniseverything.net/>
< http://css.maxdesign.com.au/>
-
jmm（连字符）列表（at）sohnen-moe （点）com
（删除电子邮件的.AXSPAMGN）
嗯，好像我两天前的回复从未进入新闻组。
这是第二次尝试...
感谢您的链接Jim，但我已经通过了这些，并且
除非我错过了一个，否则他们都不会做我想要的。它们都有固定宽度或固定百分比。
固定宽度。我正在寻找一种方法来让
左列（DIV）只占用内容所需的空间，并且
右侧列需要其余的。
如果我错过了一个这样的样本，请你提供更多
特定的链接，因为我看不到一个。
< http://css-discuss.incutio.com/>
很棒的网站，大量的样本，但都受到上述问题的困扰。
< http://www.csszengarden.com/>
漂亮的网站，但几乎每个设计都修复了字体大小和
的宽度。
< http：// www .positioniseverything.net />
这也是一个很棒的网站，但请看上面的评论
< http://css.maxdesign.com.au/>
我认为你是指浮动教程。再一次，AFAICS，没有
自动调整大小的例子。
可能是CSS根本就没有达到这个目的而且我要去
坚持使用表格一段时间。如果有人有任何想法，请
回复。 TIA。
-
Alan Silver
（此行下面添加的任何东西都与我无关）
Alan Silver schrieb：
< table border =" 0" CELLPADDING = QUOT; 0" CELLSPACING = QUOT; 0" width =" 100％">
< tr>
< td align =" left" valign =" top">
< small>
< a href =" ..."> Ferrets< / a>
< br>< a href =" ..."> Gibbons< / a>
< br>< a href =" ..."> Voles< / a>
< /小>
< / td>
< td align =" left" valign =" top">
这是主要内容的所在......
< / td>
< / tr>
< / table>
....有没有办法设置它，以便左栏只有内容所需的宽度，而右栏使用其余的？
您的表格解决方案不符合您的描述，链接列
对我来说可能约为20％。尝试理解浮动和div以及
你得到的正是你想要的：
< div>
<！ - - 浮动总是将div减少到所需的最小尺寸！这是'b $ b'自动''显示：内联;'' - >
< div style =" float：left;">
< small>
< a href =" ..."> Ferrets< / a>< br />
< a href =" ..."> Gibbons< / a>< br />
< a href =" ..."> Voles< / a>
< / small>
< / div>
<！ - 没有什么能将div扩展到最大值可用大小！
这是每个无格式div的默认行为 - >
< div style ="">
这是主要内容的来源......
< / div>
<！ - 停止使用以下内容制作垃圾 - >
< div style =" clear：both;" />
< / div>
abc
TIA
Niels
Hello,
Sorry if this is covered somewhere, but I''ve looked at countless sites
explaining how to do multicolumn layouts in CSS, but have yet to find
one that does what I want.
In the old days, I would use something like this (deliberately small
fragment of air code, so no comments about validity please!!) to produce
a two-column layout, where the left column was (say) for site links...
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top">
<small>
<a href="...">Ferrets</a>
<br><a href="...">Gibbons</a>
<br><a href="...">Voles</a>
</small>
</td>
<td align="left" valign="top">
This is where the main content goes...
</td>
</tr>
</table>
The advantage of this is that the left column would only be wide enough
to fit the links, and the right column would expand to fill the rest of
the window (assuming it had enough content of course).
I have been looking to do such a layout in CSS, but can''t see how. All
the examples I''ve seen use DIVs for the columns, and float them. They
set the width of the left DIV either as a fixed value in pixels, ems,
etc, or as a percentage. Either way, the left column''s width is
independent of the contents. If the text of the links are all short,
then you waste space in the left column. If there are long texts, they
overflow the DIV and spill into the right column.
Is there any way to set it so that the left column is only as wide as
needed by the contents, and the right one uses the rest? As I said, I''ve
searched and searched, I''ve followed loads of links from posts in this
group, but I''ve yet to find a layout that is as flexible as the old
table one. I would be very grateful if anyone can point me in the right
direction.
TIA
--
Alan Silver
(anything added below this line is nothing to do with me)
Alan Silver wrote:
The advantage of this is that the left column would only be wide enough
to fit the links, and the right column would expand to fill the rest of
the window (assuming it had enough content of course).
I have been looking to do such a layout in CSS, but can''t see how. All
the examples I''ve seen use DIVs for the columns, and float them. They
set the width of the left DIV either as a fixed value in pixels, ems,
etc, or as a percentage. Either way, the left column''s width is
independent of the contents. If the text of the links are all short,
then you waste space in the left column. If there are long texts, they
overflow the DIV and spill into the right column.
<http://css-discuss.incutio.com/>
<http://www.csszengarden.com/>
<http://www.positioniseverything.net/>
<http://css.maxdesign.com.au/>
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Hmm, it seems my reply of two days ago never made it into the newsgroup.
Here goes for a second try...
Thanks for your links Jim, but I''ve been through those already, and
unless I missed one, none of them do what I want. They all have either
fixed width, or a fixed percentage. I''m looking for a way to have the
left column (DIV) only take as much space as the contents need, and have
the right column take the rest.
If I missed a sample that does that, please could you provide a more
specific link as I couldn''t see one.
<http://css-discuss.incutio.com/>
Great site, loads of sample, but all suffer from the problem mentioned.
<http://www.csszengarden.com/>
Beautiful site, but almost every design fixes the font size and the
width.
<http://www.positioniseverything.net/>
Also a great site, but see comments above
<http://css.maxdesign.com.au/>
I presume you were referring to the floatutorial. Again, AFAICS, no
example of automatic sizing.
It could be that CSS simply isn''t up to this yet and I''m going to have
to stick with tables a while longer. If anyone has any idea, please
reply. TIA.
--
Alan Silver
(anything added below this line is nothing to do with me)
Alan Silver schrieb:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top">
<small>
<a href="...">Ferrets</a>
<br><a href="...">Gibbons</a>
<br><a href="...">Voles</a>
</small>
</td>
<td align="left" valign="top">
This is where the main content goes...
</td>
</tr>
</table> .... Is there any way to set it so that the left column is only as wide as
needed by the contents, and the right one uses the rest?
Your table-solution doesn''t fit your description, the link-column
is maybe at about 20% for me. Try to understand floating and div and
you get exactly what you want:
<div>
<!-- floating always reduces the div to the minimum needed size! it''s
automatically ''display: inline;'' -->
<div style="float: left;">
<small>
<a href="...">Ferrets</a><br/>
<a href="...">Gibbons</a><br/>
<a href="...">Voles</a>
</small>
</div>
<!-- nothing always expands the div to the maximum available size!
that is the default behaviour of every unstyled div -->
<div style="">
This is where the main content goes...
</div>
<!-- stop making garbage with the following content -->
<div style="clear: both;" />
</div>
abc
TIA
Niels
这篇关于如何进行多列布局，其中列大小适合内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
