Question

我制作了一个简单的网站，但在布局上苦苦挣扎。

这就是我要做的事情：

这就是我所做的：

<div id="cabecalho">

<div id="logo"><img src="img/logo.png" alt="Advocacia" /><img src="img/inico.png" alt="IN" id="inico" /><img src="img/twitterico.png" alt="Twitter" id="twitterico" /></div>


<div id="escritorio">ESCRITÓRIO</div><div id="atuacao">ATUAÇÃO</div><div id="contatos">CONTATOS</div><div id="artigos">ARTIGOS</div>


</div>

这是CSS：

body{
    border: 0;
    padding: 0;
    margin: 0;
}
#logo {
   width: 80%;
   margin: 0;
   padding: 0;
   background-color:#ffffff;
   display: table;
   margin: 0 auto;   
}
#twitterico{
    float: right;
    padding-right: 10px;
}
#inico{
    float: right;
}
#cabecalho{
    width: 100%;
    border: 0;
    padding: 0;
    margin: 0;

}
#escritorio{
    background-color:#243655;
    height: 50px;
    text-align: center;
    line-height: 50px;
    width: 30%;
    display: inline-block;
    color:#ffffff;
    font-family: arial;
    font-weight: bold;

}
#atuacao{
    background-color:#ffffff;
    height: 48px;
    text-align: center;
    line-height: 48px;
    width: 20%;
    display: inline-block;
    border-left: 1px solid #aab1bd;
    border-bottom: 1px solid #aab1bd;
    border-top: 1px solid #aab1bd;
    color:#243655;
    font-family: arial;
    font-weight: bold;  

}
#contatos{
    background-color:#ffffff;
    height: 48px;
    text-align: center;
    line-height: 48px;
    width: 19.7%;
    display: inline-block;
    border-left: 1px solid #aab1bd;
    border-bottom: 1px solid #aab1bd;
    border-top: 1px solid #aab1bd;  
    color:#243655;
    font-family: arial;
    font-weight: bold;  

}
#artigos{
    background-color:#ffffff;
    height: 48px;
    text-align: center;
    line-height: 48px;
    width: 30%;
    display: inline-block;
    border-left: 1px solid #aab1bd;
    border-bottom: 1px solid #aab1bd;
    border-top: 1px solid #aab1bd;
    border-right: 1px solid #aab1bd;
    color:#243655;
    font-family: arial;
    font-weight: bold;  
}

所以，问题是当我调整窗口大小时，布局完全搞砸......

我该如何解决？

有没有更好的方法来做我做的每件事？

提前感谢您的帮助。

Answer 1

您想要做的是响应式设计。根据当前屏幕大小（或在您的案例浏览器窗口中），您必须重新排列/缩小/删除不同的元素，以便它们都可以适合屏幕。在此处了解如何操作：http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

CSS，div固定大小

1 个答案: