具有多種內容的動態div容器

我嘗試製作一種帶有CSS的橫幅。該div包含兩個圖像和一個文本分割成兩行。它在我的顯示器上看起來不錯，但如果我在其他顯示器上加載較小分辨率和/或4：3的一邊，則整個容器是「正在降落appart」:( 我嘗試了不同的方法，但似乎沒有任何工作。被一些你可以點我在正確的方向:)具有多種內容的動態div容器

這裏是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>

來源

2015-04-01 Kallmas

您可以製作一個[tag：JSFiddle]演示嗎？ – SaidbakR 2015-04-01 14:44:49

看看[媒體查詢]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries） – 2015-04-01 14:51:03

如果你想使用一個旗幟所有瀏覽器和分辨率，你應該使用百分比，而不是像素...例如：

#head_box_banner { 
position: absolute;  

height: yourheight%; 

width: auto;

請注意，您在使用百分比高度和寬度僅橫幅，而不是照片。 PS：嘗試玩高百分比，看看有多少百分比是最適合你的選擇。

來源

2015-04-01 14:45:08

我在這裏度過快速去就是我認爲你要爲

<!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一個最小寬度。即使我的神奇變化也會在窗口變得過小的時候消失，以避免發生這種情況，我已經確保頭部永遠不會小於900像素。如果是這樣，用戶將不得不向右滾動以查看整個標題。 FYI有更好的解決方案（查找響應式設計）

來源

2015-04-01 15:51:34 ForeverStuck

感謝您的工作。它對我來說很好。 :) 可能是我可以仍然有點玩的設置，以獲得它甚至更小的分辨率工作。但你把我帶到了正確的路上。：D 非常感謝。 – Kallmas 2015-04-02 10:00:26

具有多種內容的動態div容器

回答

相關問題