-1
我正在製作一個簡單的網站，但它的佈局正在掙扎。CSS，div固定大小
這是我必須做的：
，這就是我所做的：
<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;
}
如此，問題是，當我調整窗口大小時，佈局完全被擰緊...
我該如何解決這個問題？
有沒有更好的方式來做我所做的一切？
在此先感謝您的幫助。
使用媒體查詢或使用引導程序。 –