blocks|key|3663986|text|您可以指定列div容器的宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3663987|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You can specify the width for the column div's container.</p>


blocks|key|1275970|text|为什么要重新发明轮子呢？有一大堆网站提供了免费的模板，这正是你想要实现的。看看其中的一些内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1275971|1275972|Iron+Myers+Layouts|unordered-list-item|offset|length|1275973|Matthew+Taylor+-+Holy+Grail|1275974|More+from+A+List+Apart|1275975|One+True+Layout|1275976|1275977|希望这些能帮助你解决问题！|1275978|entityMap|0|LINK|mutability|MUTABLE|url|http://layouts.ironmyers.com/|1|http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-no-quirks-mode|2|http://www.alistapart.com/articles/holygrail|3|http://positioniseverything.net/articles/onetruelayout/^0|0|0|0|I|0|0|0|R|1|0|0|M|2|0|0|F|3|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|16|8|@]|9|@$F|17|G|18|1|19]]|A|$]]|$1|H|3|I|5|E|7|1A|8|@]|9|@$F|1B|G|1C|1|1D]]|A|$]]|$1|J|3|K|5|E|7|1E|8|@]|9|@$F|1F|G|1G|1|1H]]|A|$]]|$1|L|3|M|5|E|7|1I|8|@]|9|@$F|1J|G|1K|1|1L]]|A|$]]|$1|N|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]|10|$5|T|U|V|A|$W|11]]|12|$5|T|U|V|A|$W|13]]]]

<p>Why reinvent the wheel? There are a bunch of sites out there that offer free templates for exactly what you are trying to achieve. Check some of these out:</p>

<ul>
<li><a href="http://layouts.ironmyers.com/" rel="nofollow noreferrer">Iron Myers Layouts</a></li>
<li><a href="http://matthewjamestaylor.com/blog/holy-grail-liquid-layout-no-quirks-mode" rel="nofollow noreferrer">Matthew Taylor - Holy Grail</a></li>
<li><a href="http://www.alistapart.com/articles/holygrail" rel="nofollow noreferrer">More from A List Apart</a></li>
<li><a href="http://positioniseverything.net/articles/onetruelayout/" rel="nofollow noreferrer">One True Layout</a></li>
</ul>

<p>Hopefully these help you out!</p>


blocks|key|1269551|text|有几种可能的解释：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1269552|1)如果流体容器具有固定宽度的列，则容器将调整大小，并且列将不再适合。可以将设置的宽度添加到容器中，也可以使列成为流体(基于%25)。如果您使用Nicole+Sullivan的方法，您甚至可以使其中一个列流动起来：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/|offset|length|1269553|2)如果您已经在使用完全流动的方法，但使用IE6/7查看它，您可能会遇到某些大小的亚像素舍入误差。Nicole的方法也解决了这个问题。|1269554|你不需要表格，只需要一点数学知识。|1269555|entityMap|0|LINK|mutability|MUTABLE|url|http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/^0|0|2X|21|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>There are several possible explanations:</p>

<p>1) If you have a fluid container with fixed-width columns, the container will resize and the columns will no longer fit. You can add a set width to the container or you can make the columns fluid (%-based). You can even just make one of the columns fluid if you use Nicole Sullivan's approach here: <a href="http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/" rel="nofollow noreferrer">http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/</a></p>

<p>2) If you are using an entirely fluid method already, but using IE6/7 to view it, you may be experiencing sub-pixel rounding errors at certain sizes. Nicole's approach solves that as well.</p>

<p>You don't need tables, just a bit of math.</p>


blocks|key|5131732|text|可以使用min-width+CSS命令指定页面的最小宽度。有关示例，请参阅this+page。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5131733|entityMap|0|LINK|mutability|MUTABLE|url|http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml^0|4|9|11|9|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>You can use the <code>min-width</code> CSS command to specify the minimum width of your page. See <a href="http://www.webcredible.co.uk/user-friendly-resources/css/more-css-tricks.shtml" rel="nofollow noreferrer">this page</a> for an example.</p>


blocks|key|1275980|text|您可以使用min-width，并使用ie7.js使其在IE6中工作|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1275981|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/CSS/pr_dim_min-width.asp|1|http://code.google.com/p/ie7-js/^0|5|9|0|I|6|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p>You can use <a href="http://www.w3schools.com/CSS/pr_dim_min-width.asp" rel="nofollow noreferrer">min-width</a> and get it to work in IE6 using <a href="http://code.google.com/p/ie7-js/" rel="nofollow noreferrer">ie7.js</a></p>


blocks|key|1276033|text|解决方案不是什么都用float。当然，你可以购买一个模板，然后“外包”这个问题，但通常情况下，网页的列式布局是通过页边距和位置(包括负值)的组合来实现的。当然，也可以是表，但在使用它们时要小心失去HTML的语义值(例如，屏幕阅读器和线性解析器会被混淆)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1276034|entityMap^0|A|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>The solution is not to use <code>float</code> for everything. Of course you can buy a template and "outsource" the problem, but usually the columnar layout of a webpage is attained using a combination of margins and positions (including negative values).
Or - of course - tables, but beware of losing semantic value of the HTML when you use them (for example screen readers and linear parsers will be confused).</p>


blocks|key|1269527|text|只需为元素设置一个显式宽度即可。这应该使它们不受任何大小调整的影响。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1269528|div.clear++{+clear:both;+}
#container+{+width:640px;+}
++#nav+++++{+float:left;+width:200px;+}
++#content+{+float:left:+width:440px;+}+

<div+id="container">
++<div+id="nav">
++++<p>Hello+World</p>
++</div>
++<div+id="content">
++++<p>Hello+World</p>
++</div>
++<div+class="clear"></div>
</div>|code-block|syntax|javascript|1269529|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just set an explicit width for your elements. This should make them immune to any resizing.</p>

<pre><code>div.clear  { clear:both; }
#container { width:640px; }
  #nav     { float:left; width:200px; }
  #content { float:left: width:440px; } 

&lt;div id="container"&gt;
  &lt;div id="nav"&gt;
    &lt;p&gt;Hello World&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
    &lt;p&gt;Hello World&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|5131848|text|我可能会因此而被否决，但在IE6从地球表面消失之前，使用表进行多列布局确实是最安全、最简单的方法。当然，这不是“正确”的方法，但在这种情况下，正确方法的奖励是如此微不足道，以至于你可能只需要在一个表中停留，然后转移到更重要的事情上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5131849|不要误会我的意思，我喜欢CSS。我只是认为多列布局的实用选择仍然是表。你将花更少的时间与浏览器抗争，而有更多的时间专注于真正有利于网站消费者的事情。|5131850|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>I'll probably be downvoted into oblivion for this, but until IE6 is gone from the face of the earth, using a table for a multi-column layout is really the safest, easiest way to go.  Sure, it's not the "right" way to do it, but in this case the reward for doing it the right way is so miniscule that you might as well just drop in a table and move on to more important things.</p>

<p>Don't get me wrong; I love CSS.  I just think that the pragmatic choice for multi-column layouts is still the table.  You'll spend less time fighting with browsers and have more time to focus on the things that will really benefit your website's consumers.</p>


<p>Whenever I create my own personal web pages, I've always had this problem with using divs to create a multi-column layout. I use the float attribute to align them to the left or right, but when I make the browser window skinnier, the columns re-adjust where one column falls below the other and other things mess up with alignment. I would like the columns to stay put like all other websites do.</p>

<p>What is the best method for this?</p>


Question about divs in HTML web page building

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

每当我创建自己的个人网页时，我总是在使用div创建多列布局时遇到这个问题。我使用float属性将它们向左或向右对齐，但是当我使浏览器窗口变得更薄时，列重新调整，其中一列位于另一列的下方，其他的事情会影响对齐。我希望专栏像所有其他网站一样留在原地。解决这个问题的最好方法是什么？

问HTML网页制作中的div问题
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML网页制作中的div问题EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML网页制作中的div问题
EN