1

Задача состоит в том, что необходимо разделить на три части страницу. Два сайдбара слева и справа, и контент посередине. Ширина каждого блока статическая и главное что блок с контентом должен отображаться по центру.

Неожиданно возникли проблемы с такой задачей и нигде не могу найти решение, уже вроде все перепробовал и интернет прошерстил.

Вот что у меня вышло с помощью display: table. Но блоки между собой очень зависимы, и я даже не могу воспользоваться какими-либо отступами для контента, не затрагивая другие блоки.

HTML:

<div class="page-wrapper">
  <div class="left-panel-wrapper">
    <div class="left-panel">
      some content some content some content some content some content some content some content some content some content
    </div>
  </div>

  <div class="content-wrapper">
    <div class="content">
      some content some content some content some content some content some content some content some content some content
    </div>
  </div>

  <div class="right-panel-wrapper">
    <div class="right-panel">
      some content some content some content some content some content some content some content some content some content
    </div>
  </div>
</div>

CSS:

.page-wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

.left-panel-wrapper, .right-panel-wrapper {
  display: table-cell;
  width: 100px;
  height: 100%;
  background-color: #f6f8fa;
}

.left-panel, .right-panel {
  display: inline-block;
}

.content-wrapper {
  display: table-cell;
}

.content {
  width: 100px;
  margin: 0 auto;
}

https://jsfiddle.net/qwnnaLjy/21/

2 ответа 2

2

Используйте flex

.page-wrapper {
  display: flex;
  justify-content: space-between;
}
.left-panel-wrapper {
  width: 200px;
  background-color: orange;
}
.right-panel-wrapper {
  width: 200px;
  background-color: green;
}
.content-wrapper {
  /*width: 250px;*/
  width: calc(100% - 400px);
  padding: 0 30px;
}
<div class="page-wrapper">
  <div class="left-panel-wrapper">
    <div class="left-panel">
      some content some content some content some content some content some content some content some content some content
    </div>
  </div>
  
  <div class="content-wrapper">
    <div class="content">
     some content some content some content some content some content some content some content some content some content
     some content some content some content some content some content some content some content some content some content
    </div>
  </div>
  
  <div class="right-panel-wrapper">
    <div class="right-panel">
      <p>some content some content some content some content some content some content some content some content some content </p>
    </div>
  </div>
</div>

на inline-block с костылём

.page-wrapper {
  text-align: justify;
  overflow: hidden;
  min-width: 1000px;
}
.page-wrapper:after {
  content: '';
  width: 100%;
  display: inline-block;
}
.left-panel-wrapper {
  display: inline-block;
  width: 200px;
  background-color: orange;
  vertical-align: top;
}

.right-panel-wrapper {
  display: inline-block;
  width: 200px;
  background-color: green;
  vertical-align: top;
}

.content-wrapper {
  display: inline-block;
  vertical-align: top;
  width: 500px;
  margin: 0 auto;
  padding: 0 10px;
}

/* костыль */
.left-panel-wrapper,
.right-panel-wrapper,
.content-wrapper {
  position: relative;
}
.left-panel-wrapper:before,
.right-panel-wrapper:before,
.content-wrapper:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 9000px;
  background: red;
  z-index: -1;
}
<div class="page-wrapper">
  <div class="left-panel-wrapper">
    <div class="left-panel">
      some content some content some content some content some content some content some content some content some content
    </div>
  </div>
  
  <div class="content-wrapper">
    <div class="content">
     some content some content some content some content some content some content some content some content some content
     some content some content some content some content some content some content some content some content some content
    </div>
  </div>
  
  <div class="right-panel-wrapper">
    <div class="right-panel">
      <p>some content some content some content some content some content some content some content some content some content </p>
    </div>
  </div>
</div>

Суть в том, что обвертки даёте overflow: hidden; а каждой колонки подкладку в виде before, через absolute, что создаёт вид background.

5
  • Благодарю за пример. Я подозревал, что с помощью flexbox это будет просто реализовать, но он у него слабая поддержка браузерами. Не знаете как реализовать без него?
    – Human
    13 мар 2018 в 18:55
  • Вы еще реализовали с плавающей шириной контента. Мне было необходимо чтобы ширина контента была статической и всегда по центру.
    – Human
    13 мар 2018 в 19:00
  • Это уже ближе) Не подскажите как выровнять на всю высоту каждый блок? А то в вашем примере они неровные.
    – Human
    13 мар 2018 в 19:30
  • пишите яснее вопросы. Вас так сразу и не понять, что вам нужно. Без flex такого не реализовать. И вообще, уже давно flex нужно юзать. поправил код с костылём 13 мар 2018 в 19:40
  • Отлично, спасибо. То что нужно.
    – Human
    13 мар 2018 в 19:59
0

#left {
  position: absolute;
  left: 0;
  top: 0;
  width: 20%;
}

#center {
  position: absolute;
  left: 39%;
  top: 0;
  width: 0;
}

#right {
  position: absolute;
  right: 0;
  top: 0;
  width: 27%;
}
<div id="left">
  <p>Левая половина</p>
  <p>...</p>
</div>
<div id="center">
  <p>Центральная половина</p>
  <p>...</p>
</div>
<div id="right">
  <p>Правая половина</p>
  <p>...</p>
</div>

1
  • 1
    добро пожаловать на stack overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 5 мая в 14:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.