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

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

html css

Html 具有多个内容的动态div容器,html,css,Html,Css,我尝试用css制作一种横幅。div包含两个图像和一个位文本拆分为两行。它在我的显示器上看起来不错，但如果我以较小的分辨率和/或4:3将侧面加载到另一个显示器上，则整个容器会掉落：我尝试过不同的方法，但似乎都不管用。也许你们中的一些人能给我指出正确的方向：以下是css和html： CSS: HTML: 如果你想为所有浏览器和分辨率使用横幅，你应该使用百分比而不是像素。。。例如： #head_box_banner { position: absolute; height: yourh

我尝试用css制作一种横幅。div包含两个图像和一个位文本拆分为两行。它在我的显示器上看起来不错，但如果我以较小的分辨率和/或4:3将侧面加载到另一个显示器上，则整个容器会掉落：我尝试过不同的方法，但似乎都不管用。也许你们中的一些人能给我指出正确的方向：

以下是css和html：

CSS:

HTML:

如果你想为所有浏览器和分辨率使用横幅，你应该使用百分比而不是像素。。。例如：

#head_box_banner {
position: absolute;    

height: yourheight%;

width: auto;

请注意，您使用的高度和宽度百分比仅用于横幅，而不用于图片。

PS：试着玩身高百分比游戏，看看有多少百分比对你来说是最好的选择。

我试了一下，这是我认为你想要的

<!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_横幅一个最小宽度为900px的横幅。当窗口变得太小时，即使是我惊人的更改也会弄糟，因此为了避免这种情况发生，我已经确保标题永远不会小于900px。如果是，用户必须向右滚动才能看到整个标题。仅供参考，对于这种查找响应式设计，有更好的解决方案

您能做一个演示吗？请看一看，谢谢您的工作。它看起来对我很好也许我仍然可以玩一些设置，让它在更小的分辨率下工作。但你把我带到了正确的方向D非常感谢。

#head_box_banner {
position: absolute;    

height: yourheight%;

width: auto;

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