0

私は HTML5 と CSS3 が初めてで、大学向けの最初のサイト/アプリを開発しています。理想的には、携帯電話の画像（まだ習得していません）に表示する必要がありますが、今のところ、柔軟なボックスが機能していることを示しています。ウィンドウサイズを調整するとテキストが折り返されますが、ロゴは変更されません。ウィンドウサイズに応じて調整されるdivの背景として画像を設定できることが提案されましたが、これを行う方法がわかりません。

!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;
}
4

1 に答える 1

0

古いフレキシブルボックスモデルを使用しているようです。 -webkit-box;

新しいものは基本的にフレックスと呼ばれるだけです。次のように入力します。 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-05T20:40:44.147 に答える