當頁面縮小時避免圖像和標題移出CSS

早上好。我對CSS很陌生，我想知道如果有人能告訴我如何在頁面縮小和合並之後停止移動頭部的內容。我在網上查了一下，但我仍然無法弄清楚。由於當頁面縮小時避免圖像和標題移出CSS

HTML

<header id= "top"> 
      <div id="title"><h1>Jorge </h1></div> 
      <div id="quote"><h6></br></br>quote here 
      <br/><br/>anonymous</h6></div> 
      <div id="pic"> 
       <a href="resume.pdf"><img src="images/one.jpg" title="See resume" height=250px align="middle"/></a> 
      </div> 

     </header>

CSS

h1{ 
    border: 1px solid black; 
    font: bold 35px tahoma; 
    text-shadow: rgba(110,110,110,.8) 2px 2px 2px; 
    width: 400px; 
} 
h6{ 

    width: 400px; 
    padding: 30px; 
    float: right; 
} 
#pic{ 

    float: right; 
    border:3px solid white; 
    -webkit-box-shadow: rgba(110,110,110,.6) 5px 5px 7px; 
    -webkit-border-radius: 5px; 
    padding: 10px; 
    -webkit-transition: -webkit-transform 2s, background 1s; 

} 

#pic:hover{ 
    -webkit-transform: scale(1.1, 1.1); 
    background: #1ec7e6; 

}

來源

2013-08-29 jorgeAChacon

提供了一些CSS將有很大的幫助，也或許是的jsfiddle的例子，但如果你想設計一個響應式佈局，那麼你要使用的百分比和不是固定的寬度

沒有看到任何css或你想要的這實際上看起來像我不知道發生了什麼「移動到處」是不是具體。

從下彼此嘗試父

使用上的元素float: left;或display: inline;下降試試這個事情停止：

h1{ 
    border: 1px solid black; 
    font: bold 35px tahoma; 
    text-shadow: rgba(110,110,110,.8) 2px 2px 2px; 
    width: 50%; 
    float: left 
} 
h6{ 
    width: 50%; 
    padding: 30px; 
    float: right; 
} 

#pic{ 
    float: right; 
    border:3px solid white; 
    -webkit-box-shadow: rgba(110,110,110,.6) 5px 5px 7px; 
    -webkit-border-radius: 5px; 
    padding: 10px; 
    -webkit-transition: -webkit-transform 2s, background 1s; 
} 

#pic:hover{ 
    -webkit-transform: scale(1.1, 1.1); 
    background: #1ec7e6; 
}

來源

2013-08-29 14:19:25

我很抱歉。我粘貼了CSS代碼，並且在提交之前顯然已將其刪除。這裏是。 @SimonStaton – jorgeAChacon

標題現在正在縮小，但正在導致圖片遍佈整個地方。我希望文本在頁面縮小時保持不變並消失。相同的圖片。 – jorgeAChacon

原來的問題沒有提到，所以沒有添加，如果你想要一個元素消失在調整大小，你將需要使用jQuery –

嘗試了這一點960 grid system。使頁面大小調整更容易。

來源

2013-08-29 14:22:03 Twifty

如果您想讓某些東西隱藏在不同的頁面寬度，請查看CSS Media Queries。這些讓您可以定義適用於不同條件（通常是頁面寬度）的CSS規則（但也可以是設備方向或功能等）。例如，如果你想隱藏你的小屏幕上的PIC，你可以做這樣的事情：

@media (max-width: 768px) { 
    #pic { 
     display: none; 
    } 
}

這告訴瀏覽器，「當你是小於768個像素寬，使用如下規則;否則，忽略它們。「

來源

2013-08-29 14:43:10

當頁面縮小時避免圖像和標題移出CSS

回答

相關問題