Question

我尝试用css制作一种横幅。 div包含两个图像和一个文本splittet分成两行。它在我的显示器上看起来不错，但是如果我将一侧装在另一个分辨率较小和/或4：3的显示器上，那么整个容器就会出现问题。 :( 我尝试了不同的方法，但似乎没有任何工作。也许你们中的一些人可以指出我正确的方向：）

这是css和html：

CSS：

#head_box_banner {
position: absolute;    
height: 150px;
width: auto;
right: 13px;
left: 13px;
top: 4px;
background-color: #DBDBDB;
border-radius:3px;
}

.logo1 {
margin-top: 19px;
margin-left: 139px;
}

.logo2 {
margin-top: -112px;
margin-left: 1380px;
}

.text_banner_1 {
margin-top: -125px;
margin-left: 426px;
font-size: 46px;
color: #062916;
font-weight:bold;
font-family: comic, serif;
font-style: oblique;
text-shadow: 0 1px 0 #ccc, 
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);   
}  

.text_banner_2 {
margin-top: 12px;
margin-left: 668px;
font-size: 46px;
color: #062916;
font-weight:bold;
font-family: comic, serif;
font-style: oblique;
text-shadow: 0 1px 0 #ccc, 
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);
   }

HTML：

<div id="head_box_banner">
                      <div class="logo1"><img src="png/logol.png" width="110" height="112" /></div>
                      <div class="text_banner_1">Förderverein Grundschule</div>
                      <div class="text_banner_2">Hindeburgstrasse e.V.</div>
                      <div class="logo2"><img src="png/logor.png" width="110" height="112" /></div>

Answer 1

如果要对所有浏览器和分辨率使用横幅广告，则应使用百分比代替像素...例如：

#head_box_banner {
position: absolute;    

height: yourheight%;

width: auto;

请注意，您仅对横幅使用高度和宽度的百分比，而不是图片。 PS：尝试使用高度百分比来查看有多少百分比是最佳选择。

Answer 2

我快速去了这里，我认为你的目标

<!DOCTYPE html>
<html>
<head>
<style>
#head_box_banner {
position: absolute;    
height: 150px;
width: auto;
right: 13px;
left: 13px;
top: 4px;
background-color: #DBDBDB;
border-radius:3px;
min-width: 900px;

}

.logo1 {
  float: left;
  margin-top: 19px;
  margin-left: 19px;
}

.logo2 {
  margin-top:19px;
  float:right;
  margin-right: 19px;
}

.text_banner_1 {
font-size: 46px;
color: #062916;
font-weight:bold;
font-family: comic, serif;
font-style: oblique;
text-shadow: 0 1px 0 #ccc, 
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);   
}  

.title_container{
  text-align:center;
  margin-top:10px;
}

.text_banner_2 {
margin-top: 12px;
margin-left: 250px;
font-size: 46px;
color: #062916;
font-weight:bold;
font-family: comic, serif;
font-style: oblique;
text-shadow: 0 1px 0 #ccc, 
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);
   }
</style>
</head>
<body>
  <div id="head_box_banner">
                      <div class="logo1"><img src="png/logol.png" width="110" height="112" /></div>
          <div class="logo2"><img src="png/logor.png" width="110" height="112" /></div>

          <div class="title_container">
              <div class="text_banner_1">Förderverein Grundschule</div>
                          <div class="text_banner_2">Hindeburgstrasse e.V.</div>
          </div>

</body>
</html>

这就是我的所作所为。首先，我使用浮点数作为图片，而不是准确指出它们的意思在于像素。这意味着他们将会“漂浮”。在浏览器的右侧或左侧，无论分辨率或浏览器大小如何，边距仅用于指定它们与包含它们的div之间的距离。

接下来，我将写作移动到自己的div中，并将文本对齐到中心。这样可以将文本保留在浏览器的中心，这样您就不需要指定中心的像素位置（如果您知道100％包含它的div有多大，您通常只想指定像素的位置在这种情况下，浏览器窗口可以缩小或分辨率可以改变，这会导致你所看到的所有故障）

最后我给了head_box_banner最小宽度900px。当窗口变得太小时，即使我的神奇变化也会被破坏，以避免发生这种情况，我确保标题永远不会小于900px。如果是，则用户必须向右滚动才能看到整个标题。仅供参考，有更好的解决方案（查找响应式设计）

具有多个内容的动态div容器

2 个答案: