添加圖像到靈活框模型

我是新來的HTML5和CSS3和開發我的第一個網站/大學的應用程序。理想情況下，我需要它顯示在手機圖像上（我還沒有掌握），但現在我試圖做的是顯示靈活的盒子工作。當您調整窗口大小時，您會看到文字環繞，但徽標保持不變。有人建議我可以將圖像設置爲背景，以根據窗口大小進行調整，但不知道如何執行此操作。添加圖像到靈活框模型

!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"/> 

     <!-- CSS --> 
     <link rel="stylesheet" href="preposting.css"> 
    <title>Title goes here</title> 
    </head> 

    <body> 
     <div id="container"> 
      <header id="top_header"> 
       <div id="logo"> 
        <img class="logo_image" src="logo.gif" alt="" /> 
       </div> 
       <div id="welcome"> 
        <h1>Text wraps when I adjust window size but image doesn't. It was suggested that I should set image as background to div and that way it would adjust but not sure how to do this.</h1> 
       </div> 
      </header> 
     </div> 
    </body> 
</html> 


#container 
{ 
    text-align:left;      
    border: 10px solid black; 
    margin: 20px auto;     
    display:-webkit-box;     
    -webkit-box-orient: vertical; 
    -webkit-box-flex: 1;     
} 
#top_header 
{ 
    border:30px solid green; 
    padding:20px; 
    background:yellow; 
    display:-webkit-box;     
    -webkit-box-orient: horizontal; 
    -webkit-box-flex: 1;     
} 

#img.logo_image { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
}

來源

2013-02-02 user2035101

我看到你正在使用的舊靈活盒模型：-webkit-box;

新的一個，基本上只有名爲flex;您可以鍵入：display: -webkit-flex;

他們這裏有它很好的例子：http://www.w3.org/TR/css3-flexbox/

CSS：

#main { display: flex; } 
#main > article { flex:1;   order: 2; } 
#main > nav  { width: 200px; order: 1; } 
#main > aside { width: 200px; order: 3; } 



@media all and (max-width: 600px) { 
    /* Too narrow to support three columns */ 
    #main { flex-flow: column; } 
    #main > article, #main > nav, #main > aside { 
     /* Return them to document order */ 
     order: 0; width: auto; 
    } 
}

來源

2013-02-05 20:40:44

添加圖像到靈活框模型

回答

相關問題