【问题标题】:Using a hidden div for layout purposes使用隐藏的 div 进行布局
【发布时间】:2013-10-22 18:01:19
【问题描述】:

我只是想知道为了获得我想要的布局而放置空 div 是否有任何缺点。有没有其他方法可以隐藏 div,因为我知道它会增加混乱的代码。

请参阅下面的图片了解我要演示的内容:

如您所见,左侧的项目符号点与 h2 元素处于同一水平,但是当我在项目符号点之前添加一个 h2 元素时,它会将它们降低到段落的水平(这就是我想要的)。显然我可以让这个 h2 元素不可见,从而达到我想要的效果,但是有没有更专业的方法来做到这一点?

【问题讨论】:

  • 您可以添加具有适当像素数量的margin-top: 50px;
  • 当然可以!!天哪,这样一个金发的时刻哈哈。谢谢老哥

标签: html css css-position positioning


【解决方案1】:

但是你为什么要这样做呢? margin-top 属性是什么?

我在这里简要介绍一下,你应该先学习 floats 而不是学习 positioning,还要学习 blockinline 元素是什么,你有很多 CSS 东西,@987654327 @paddings` 等,也看看box-model 以免以后扯头发

如果您想坚持使用脏标记而不是空的 div'sbr 是您的选择,但您不会使用 br 从顶部获得特定高度,因此您需要使用空 div 但不要使用它

【讨论】:

    【解决方案2】:

    两个可以快速解决问题的建议:

    1. 项目符号元素上的边距顶部或。

    2. 添加一个带有不间断空格的 H2,例如

       <h2>&nbsp;</h2>
      

    【讨论】:

      【解决方案3】:

      如果你想在没有 CSS 的情况下添加额外的空间,你可以使用&lt;br/&gt; 标签 - 它绝对比空 div 好得多,这很混乱而且是不好的做法。

      不过,CSS 确实是最好的方法。

      给 h2 一个宽度,让它占据整个行的其余部分。然后,项目符号列表将自动下降到与左侧段落相同的高度。
      或者,给项目符号列表一个 margin-top 或 padding-top。

      【讨论】:

        【解决方案4】:

        我建议您将 margin-top 用于第二个 div 或将 margin-bottom 用于第一个。

        例子:如果隐藏的div的高度是100px,你最好写:&lt;div style="margin-bottom:100px"&gt;...&lt;/div&gt;

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2012-08-03
          • 1970-01-01
          • 1970-01-01
          • 2014-04-04
          相关资源
          最近更新 更多