0

我是 HTML5 和 CSS3 的新手，正在为大学开发我的第一个网站/应用程序。理想情况下，我需要它显示在手机图像上（我还没有掌握），但现在我正在尝试做的只是显示灵活的盒子工作。当我调整窗口大小但徽标保持不变时，您将看到文本换行。有人建议我可以将图像设置为 div 的背景，该 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;

新的基本上只叫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-05T20:40:44.147 回答