【问题标题】:Dynamic header with child divs that fill screen?带有填充屏幕的子div的动态标题?
【发布时间】:2016-10-02 12:58:31
【问题描述】:

我已经问过这个问题了,但是方法不对。我应该告诉你们我想要什么,而不是如何解决我的问题......

基本上我想要一个动态的、固定高度的 (150px) 标题,它由一个图像(带 alpha 通道的 PNG)和一个延伸到屏幕边缘的框组成。整个事情也需要50% 透明。

我已经尝试使用 div 来创建拉伸框,将它们和图像放在父 div 中,但从未让它们调整宽度以到达屏幕边缘。

这是一个图表: [---div---][---image---][---div---]

有人有什么想法吗?

【问题讨论】:

    标签: html image


    【解决方案1】:

    #header
    {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 150px;
      width: 100%;
      opacity: 0.5;
      background-color: gray;
      display: table;
    }
    
    #l
    {
      background-color: red;
    }
    
    #r
    {
      background-color: blue;
    }
    
    .headDiv
    {
      
      height: 100%;
      width: 50%;
      vertical-align: middle;
      display: table-cell;
    }
    <head>
      <div id="header">
        <div class="headDiv" id="l"></div>
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png" width=auto height=150px style="display:block">
        <div class="headDiv" id="r"></div>
      </div>
    </head>
    
    <body style="background-color:green; margin-top:160px;">
      Things in the body go here.
    </body>

    这是工作栏,带有颜色编码的divs 和代表中心的日本国旗。所有功劳都归功于 Marc Audet,他出色的 display: table 填充空间策略。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-12-29
      • 1970-01-01
      • 2012-07-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-12-15
      相关资源
      最近更新 更多