Question

我是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;
}

Answer 1

我发现你使用的是旧的灵活盒子模型：-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;
    }
}

将图像添加到Flexible box模型

1 个答案: