„Trochę utknąłem w CSS dla projektu domowego”robić. Obecnie pracuję nad nagłówkiem lub „górnym paskiem menu”. Po każdej stronie rzutni znajduje się przycisk lub dwa z ustalonym wymiarem piksela. i są ustawione jako display: block ;.
Teraz staram się uzyskać to, że„head-center” -div będzie unosić się na tej samej linii pośrodku między tymi L i R div „s. I cała zawartość w nim powinna być wyśrodkowana również. Ostatnią rzeczą, którą próbuję zrobić, jest max. szerokość środkowego div może (dynamicznie) nie być większa niż to, co pozostało z szerokości rzutni minus to, co jest używane dla L i R div (więc wszystko pozostaje na tej samej wysokości).
Jak mogę uzyskać taki wynik?
<header>
<div id="header-left"></div>
<div id="header-center"></div>
<div id="header-right"></div>
</header>
#header-left {
width: 160px;
height: 80px;
display: block;
float: left;
}
#header-center {
height: 80px;
display: block;
overflow: hidden;
}
#header-right {
width: 240px;
height: 80px;
display: block;
float: right;
}
Odpowiedzi:
0 dla odpowiedzi № 1Może to może rozwiązać twój problem
header{
display: table;
width: 100%;
}
#header-left {
width: 160px;
height: 80px;
display: table-cell;
background: #f00;
}
#header-center {
height: 80px;
overflow: hidden;
display: table-cell;
background: #0f0;
}
#header-right {
width: 240px;
height: 80px;
display: table-cell;
background: #00f;
}<header>
<div id="header-left">Left</div>
<div id="header-center">Center</div>
<div id="header-right">Right</div>
</header>0 dla odpowiedzi nr 2
Sugerowana odpowiedź:
<!Doctype html>
<style>
body{
margin:0;
width:100%;
}
#header-left,
#header-center,
#header-right{
float:left;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
#header-left,
#header-right{
width:10%;
background:rgb(255,0,0);
}
#header-center{
width:80%;
background:rgb(0,0,255);
}
</style>
<body>
<header>
<div id="header-left">Content</div>
<div id="header-center">Content</div>
<div id="header-right">Content</div>
</header>
</body>
</html>