Столкнувшись с проблемой, пытающейся центрировать 4 диаграммы JS в DIV

Question

У меня есть страница с боковой панелью, занимающая 25% с float:left стороной страницы, и div с float:right, занимающий другую 75%. В правом div есть 4 графика ChartJS в формате 2 на 2. По причинам, которые я не могу понять, я не могу заставить Диаграммы выравниваться по центру деления или заставлять их растягиваться, чтобы использовать весь делив, а не только левые 70%. Я пробовал разные значения с плавающей точкой, выравнивание текста, ширину, отступы и не могу понять, что это правильно.

<div class="dashboards">
    <div id="chartsId" class="row">
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
            <canvas width="200" height="200"></canvas>
        </div>
    </div>
</div>

.dashboards {
    margin: 0;
    border: 1px solid red;
    display: table;
    width: 100%;
    table-layout: fixed;
    text-align: center;
}

Answer 1

Подходит ли дизайн ниже вашего вопроса? Простой способ здесь - использовать плавающие элементы с определенной высотой и шириной.

Ниже рабочий фрагмент и снимок экрана, имитирующий ваш дизайн (слева и панели) в качестве наглядного доказательства.

#root {
  display: flex;
  justify-content: flex-start;
}

#leftpanel,
#rightpanel {
  min-height: 100%;
  box-sizing: border-box;
  /* to include the borders in the dimensions */
}

#leftpanel {
  width: 25%;
  background: black;
  color: white;
}

#rightpanel {
  width: 75%;
  background: #f0f0ff;
}

.dashboards {
  width: 100%;
  margin: 0;
  border: 1px solid red;
  box-sizing: border-box;
  /* to include the borders in the dimensions */
}

.row {
  margin: auto;
  /* Defining width and height to let the "col-sm-5" class to be defined */
  /* relatively to them.                                                 */
  width: 400px;
  height: 400px;
  box-sizing: border-box;
  /* to include the borders in the dimensions */
  border: 5px solid darkgreen;
  background: #f0f0f0;
}

.col-sm-5 {
  /* use floating positioning */
  float: left;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  /* to include the borders in the dimensions */
  border: 2px solid darkblue;
}

<div id="root">
  <div id="leftpanel">
    Left panel
  </div>
  <div id="rightpanel">
    Right panel
    <div class="dashboards">
      <div id="chartsId" class="row">
        <div class="col-sm-5">
          <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
          <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
          <canvas width="200" height="200"></canvas>
        </div>
        <div class="col-sm-5">
          <canvas width="200" height="200"></canvas>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

ОК, так что если вы используете Bootstrap, то я думаю, что ваша проблема заключается в количестве столбцов.

Bootstrap использует макет из 12 столбцов, и вы используете 10 на строку (и я говорю "на строку ", потому что у вас есть 5 * 4 = 20 столбцов, которые разрешены в две строки 10x10).

Вместо этого попробуйте две row s, которые будут работать, если вы не хотите, чтобы макет из одной строки на рабочем столеили что-то подобное.Это будет выглядеть так:

<div class="row">
  <div class="col-sm-5"><chart /></div>
  <div class="col-sm-5"><chart /></div>
</div>

<div class="row">
  <div class="col-sm-5"><chart /></div>
  <div class="col-sm-5"><chart /></div>
</div>

Что нормально, но у вас все еще будет проблема смещения.И что вам нужно исправить это ... offset !Снова возникает проблема: 10 столбцов используются в макете с 12 столбцами.Примерно так: где x - это одна диаграмма, а y - другая:

|x|x|x|x|x|y|y|y|y| | |

Вводя смещение в 1 столбец, вы будете центрировать свои столбцы следующим образом:

| |x|x|x|x|x|y|y|y|y| |

Ивсе, что вам нужно сделать, это добавить .offset-sm-1 к вашим столбцам, например:

<div class="row">
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>

<div class="row">
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
  <div class="col-sm-5 .offset-sm-1"><chart /></div>
</div>

И у вас должны быть хорошие центрированные диаграммы.