Question

我已经问过这个问题了，但问题是错误的。我应该告诉你们我想要的东西，而不是如何解决我的问题......

基本上我想要一个动态的，固定高度（150px）的标题，它包含一个图像（带有alpha通道的PNG）和一个伸展到屏幕边缘的框。整个事情也需要50%透明。

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

这是一张图表： [---div---] [---image---] [---div---]

有人有任何想法吗？

Answer 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>

这是工作栏，带有颜色编码的div和日本标志来代表中心。所有功劳都归功于Marc Audet，因为他提供了很好的display: table填补空间的策略。

带有填充屏幕的子div的动态标题？

1 个答案: