如何进行多列布局，其中列大小适合内容？

本文介绍了如何进行多列布局，其中列大小适合内容？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！你好，对不起，如果这个被覆盖在某个地方，但我看过无数网站解释如何在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 （此行下面添加的任何东西都与我无关）解决方案 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 sitesexplaining how to do multicolumn layouts in CSS, but have yet to findone that does what I want.In the old days, I would use something like this (deliberately smallfragment of air code, so no comments about validity please!!) to producea 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 enoughto fit the links, and the right column would expand to fill the rest ofthe window (assuming it had enough content of course).I have been looking to do such a layout in CSS, but can''t see how. Allthe examples I''ve seen use DIVs for the columns, and float them. Theyset 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 isindependent 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, theyoverflow the DIV and spill into the right column.Is there any way to set it so that the left column is only as wide asneeded by the contents, and the right one uses the rest? As I said, I''vesearched and searched, I''ve followed loads of links from posts in thisgroup, but I''ve yet to find a layout that is as flexible as the oldtable one. I would be very grateful if anyone can point me in the rightdirection.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, andunless I missed one, none of them do what I want. They all have eitherfixed width, or a fixed percentage. I''m looking for a way to have theleft column (DIV) only take as much space as the contents need, and havethe right column take the rest.If I missed a sample that does that, please could you provide a morespecific 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 thewidth. <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, noexample of automatic sizing.It could be that CSS simply isn''t up to this yet and I''m going to haveto stick with tables a while longer. If anyone has any idea, pleasereply. 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-columnis maybe at about 20% for me. Try to understand floating and div andyou get exactly what you want:<div><div style="float: left;"><small><a href="...">Ferrets</a><br/><a href="...">Gibbons</a><br/><a href="...">Voles</a></small></div><div style="">This is where the main content goes...</div><div style="clear: both;" /></div>abc TIANiels 这篇关于如何进行多列布局，其中列大小适合内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！