html - 当页面收缩 CSS 时，避免图像和标题移动到不合适的位置

Question

早上好。我是 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;

}

Answer 1

试试这个 960 grid system .使调整页面大小变得更加容易。