【问题标题】:Yui, how to remove the margins for a 2 column layout?Yui,如何删除 2 列布局的边距?
【发布时间】:2008-09-29 14:36:34
【问题描述】:

我希望 2 列触摸即。删除边距,我该怎么做?

我的代码:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>testing</TITLE>
  <!-- css --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css"> 
<!-- js --> 
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/utilities/utilities.js"></script> 
<style>
.yui-b {
    background-color: #eeeeee;
}


</style>
 </HEAD>

 <BODY>
  <div id="doc3" class="yui-t1"> <!-- change class to change preset --> 
        <div id="hd">header</div> 

        <div id="bd"> 
          <div id="yui-main"> 
         <div class="yui-b">
             bd.main
             </div> 
          </div> 

          <div class="yui-b">bd.other</div>         
        </div> 

        <div id="ft">footer</div> 
    </div> 
 </BODY>
</HTML>

【问题讨论】:

    标签: yui margins yui-grids


    【解决方案1】:

    在右列添加一个类,并将 margin-left 设置为 0。

    如果这不起作用,您可能需要将宽度增加 1% 或 2%。您可以使用 firebug 检查应用的样式并即时更改它们。

    【讨论】:

      【解决方案2】:

      请注意,您使用的是 YUI(雅虎 UI)。

      查找 YUI reset.css。每个浏览器都有可能不同的边距、填充、字体大小默认值。你真的应该使用这样的 reset.css 文件来启动每个 Web 应用程序,以使所有内容都有一个共同点。否则你可能会发现你“修复”了这个问题,只是在从另一台机器/平台查看时它会再次出现。

      希望您从所有没有边距或填充的块元素开始,然后您可以在需要的地方添加边距和填充。

      【讨论】:

        【解决方案3】:

        请注意,您使用的是 YUI(Yahoo UI)。

        【讨论】: