Как установить блок по центру, учитывая ширину и позицию двух соседних блоков?

Здравствуйте!

Необходимо с помощью свойства position:absolute реализовать трехколоночный макет, применив это свойство к двум крайним блокам.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>ПТ_1.3.1</title>
</head>

<body>
    <div class="header с1">
        1
    </div>
    <div class="menu с2">
        2
    </div>
    <div class="info с4">
        4
    </div>
    <div class="content с3">
        3
    </div>
    <div class="footer с5">
        5
    </div>
</body>

</html>

style.css

html,
body {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 150px;
}

.menu {
    position: absolute;
    width: 20%;
    min-height: 300px;
    left: 0;
}

.info {
    position: absolute;
    width: 20%;
    min-height: 300px;
    right: 0;
}

.content {
    min-height: 400px;
}

.footer {
    width: 100%;
    height: 100px;
}

.с1 {
    background-color: #e8e4fb;
}

.с2 {
    background-color: #e6bae4;
}

.с3 {
    background-color: #e081c3;
}

.с4 {
    background-color: #ba2461;
}

.с5 {
    background-color: #700208;
}


Сейчас получилось следующее:
https://jsfiddle.net/19q52mda/

Левый и правый блок имеют свойство position:absolute.
Как можно центральный светло-розовый блок поместить в центре?
Возможно ли это сделать, не устанавливая position:absolute для этого блока?
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
Не совсем понятно стремление использовать position:absolute
<div class="header">HEADER</div>
<div class="content">
    <div class="left">MENU</div>
    <div class="data">DATA</div>
    <div class="right">SIDEBAR</div>
</div>
<div class="footer">FOOTER</div>

html,
body {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 150px;
    background:red;
}

.content { font-size:0px; }

.left,
.right,
.data {
  display:inline-block;
  height:200px;
}

.left { width:20%; background:green; }
.right { width:20%; background:green; }
.data { width:60%; background:blue; }


.footer {
    width: 100%;
    height: 100px;
    background:yellow;
}


и Все:) зачем абсолютные величины
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы