【问题标题】:Not able to position header properly无法正确定位标题
【发布时间】:2015-01-12 20:38:49
【问题描述】:

我想用一些菜单链接制作一个标题。内部 div 不占用 上边距。请建议我如何为此编写 css。

 <div style ="width:100%; background-color:Aqua; height:100px;">

    <div style="width:876px;background-color:Blue;margin:20px auto;height:60px;">
        <h3>menu items</h3>
    </div>

</div>

此外,当我调整浏览器的大小(在 mozilla 上按 shift+ctrl+M)时,外部潜水不会正确包裹内部 div。

【问题讨论】:

  • 为什么不在标题中使用填充而不是尝试将内部 div 移动边距?

标签: html css


【解决方案1】:

你可能会得到这个,因为你的第二个宽度是固定的,所以无论浏览器大小如何,它都不会改变,而第一个宽度会改变,因为它是百分比

<div style ="width:100%; background-color:Aqua; height:100px;">

    <div style="width:70%;background-color:Blue;margin:20px auto;height:60px;">
        <h3>menu items</h3>
    </div>

</div>

【讨论】:

    【解决方案2】:

    设置outer-div为

    display:inline-block
    

    【讨论】:

      【解决方案3】:

      这是你想要的fiddle吗?

      html

      <div class ='outer'>
          <div class='inner'>
              <h3>menu items</h3>
          </div>
      </div>
      

      css

      .outer{
          width:100%; 
          background-color:Aqua;
          height:100px;
          padding-top:20px;
          min-width:876px;
      }
      
      .inner {
          width:876px;
          background-color:Blue;
          margin:0 auto;
          height:60px;
      }
      

      【讨论】:

      • 我认为他更关注内部和外部两者的响应能力,因此他可能期望在调整浏览器大小时它是相同的比率/结果
      • 谢谢,它起作用了.....但是在调整浏览器大小时(在 mozilla 上按 shift+ctrl+M),外部潜水没有正确包裹内部 div。
      • @user1410688 抱歉没有完全理解你想要什么。这里没有 Mozilla。
      • 如果我以百分比给出内部 div 则可以,但是当我以像素为单位给出时,内部 div 不会被外部 div 包裹.....
      猜你喜欢
      • 2022-07-17
      • 2015-12-01
      • 2012-11-26
      • 2022-01-28
      • 2017-12-19
      • 2018-08-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多