Блог

Я пытаюсь создать панель мониторинга ключевых показателей эффективности, каждая из которых отображается в своих собственных «плитках», эти плитки имеют статический width и height (в приведенных примерах это так 200px ). Веб-сайт, на котором они размещаются, имеет содержимое в формате a <div> с атрибутами CSS margin:auto , и width:80% это было сделано для того, чтобы пользователи с широкоэкранными экранами могли воспользоваться увеличенной шириной содержимого. Мне нужны плитки, которые должны быть выровнены по левому краю, как если бы они содержались в таблице, но должны быть выровнены по центру внутри контейнера плиток (который занимает всю ширину тела шириной 80%).).

Я создал здесь JSFiddle, ранее я создавал решения, в которых используется JQuery использование $(window).resize() обработчика и программная настройка width контейнера плитки, однако я надеюсь, что это можно сделать с помощью pure CSS , чтобы уменьшить JavaScript требуемое (я уже много использую на странице для AJAX и обновления дисплеев.

Как можно получить требуемое выравнивание (на фото ниже), используя только CSS? Можно добавить дополнительные элементы, но я предпочел бы сохранить структуру как можно более простой.

Обновление для уточнения требований:

В моих примерах всего 3 дочерних элемента, возможно, что панель мониторинга может иметь любое число, например, если у вас должно быть 5 плиток, она может быть выложена следующим образом (в зависимости от доступной ширины экрана и изменения размера страницы):

• 5 в одной строке
• 4 в верхней строке 1 в нижней
• 3 в верхней строке, 2 в нижней
• 2 ряда по 2 плитки и третий с одним
• 5 строк по 1 тайлу

Да, это возможно путем явного определения ширины каждого элемента в пикселях, но ширина, но:

• pageBody элемент ДОЛЖЕН быть width:80% (не 800px / 600px, как это принято), используемая область экрана должна быть максимизирована (до некоторой степени), позволяя пользователям широкоэкранного экрана видеть больше, а не показывать только 600 / 800px в середине экрана.
• они tileContainer ДОЛЖНЫ быть центрированы внутри pageBody и будут «изменять размер» в соответствии с шириной, используемой содержащимися фрагментами (это НЕ может быть явно определено в CSS виде n пикселей, поскольку у разных пользователей панели мониторинга разные размеры экрана, а мобильные устройства делают вещи еще более увлекательными). Это можно сделать, изменив ширину при изменении размера страницы, используя JQuery , как указано ранее, но я ищу CSS единственное решение.
  • tile элементы должны быть выровнены по левому краю в пределах tileContainer

Внизу есть изображения, демонстрирующие требуемое поведение.

HTML

 3 Children:
<div class='pageBody'>
    <div class='tileContainer'>
        <div class='tile'></div>
        <div class='tile'></div>
        <div class='tile'></div>
    </div>
</div>
  

CSS

 .pageBody{
    width: 80%;
    margin: auto;
    background-color:lightgrey;
}.tileContainer{
    text-align:center; /*Removing this doesn't centre the tiles in their container*/
}.tile{
    background-color:purple;
    display:inline-block;
    margin:5px;
    width: 200px;
    height: 200px;
}
  

Пример: выравнивание по левому краю внутри тела

Пример: выравнивание по центру внутри тела

Пример: требуется выравнивание

ТайлеР был близок. Я просто взял его jfiddle и немного изменил его. Вам нужно добавить ширину ко второму, содержащему div, тогда вы сможете использовать margin auto для его центрирования.

Jsfiddle