Выравнивание нескольких div-боксов по горизонтали и по вертикали

Я использую https://almsaeedstudio.com/preview тему, которая дает макет ярких макетов ящиков и раскладки ящиков для социальных ящиков, которые я хочу использовать в своем проекте,

Я пытаюсь расположить несколько простых ящиков по горизонтали, где каждый из простых ящиков может содержать несколько ящиков с социальными виджетами.

Обратитесь к этому скриншоту для большей ясности:

Я попробовал сыграть с выпадающими простыми блоками и кодом социальных ящиков и придумать этот фрагмент.

Я создал этот плункер, так как css не загружается должным образом.

Ответы

Ответ 1

→ → → → → → → → → → > FLEXBOX РЕШЕНИЕ < < < < < < < < < < < < < < < <; < < < < < < < < <

Вот REAL SOLUTION ОРИГИНАЛЬНЫЙ ВОПРОС, если кто-то действительно заинтересован.

dark_shadow:

В то время как zer00ne @предоставил одно решение, основанное на Flex.

Проблема решена, см. мои демо ниже, она говорит сама за себя. Я понятия не имею, почему starikovs вообще получает преимущество, когда нет никакого решения.

Мне пришлось воссоздать страницу, потому что лишний класс <div>, который вы разместили внутри разметки, был запутан. Значительное изменение заключалось в добавлении flexbox к макету. Я использовал два контейнера flexbox, один из которых управлял двумя столбцами .flexRow, а другой внутри каждого столбца для управления виджетами, .flexCol. Те, кто не имеет класса <div>, объединены в <section class="colWrap", я добавил собственные измерения, так что ваш макет не застрял на фиксированной ширине 2050 пикселей, вам все равно нужно настроить как .box на внутреннее измерение, фиксированное 1000px готовятся к скорби в будущем. Изменения будут аннотированы, когда я вернусь. Если, конечно, это не то, что вы хотели?

ПОСЛЕДНИЕ НА ПОСЛЕДНЕЕ ОБНОВЛЕНИЕ

< < < < < <

ИЗМЕНИТЬ

~~Просто добавьте фиксированную высоту в .colWrap, предложите 100vh to 150vh~~

Я проверил высоту обоих столбцов, и они на самом деле идентичны до десятичной. Смотрите скриншоты:

Столбец 1

Столбец 2

OLD

Вам просто нужно все выровнять, правильно? Хорошо, посмотрите здесь: http://embed.plnkr.co/MRI69qLoTkiL9F68g54M/preview

Я добавил это к <head>

<!DOCTYPE html>
<html>

  <head>
    <base href="https://almsaeedstudio.com/themes/AdminLTE/">
    <link href="https://almsaeedstudio.com/themes/AdminLTE/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

UPDATE

Добавлен script. Он расположен перед закрывающим тегом </body>.

<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="plugins/chartjs/Chart.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard2.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>

Вам, вероятно, не нужны все из них, но важными являются:

bootstrap.min.css
шрифта awesome.min.css
JQuery-2.1.4.min.js
bootstrap.min.js
app.min.js
jquery.slimscroll.min.js

Там много относительных URL (например../dist/img/photo2.png), поэтому я добавил следующее в начало <head>:

<base href="https://almsaeedstudio.com/themes/AdminLTE/">

Большинство этих внешних файлов расположены на этом базовом url. Если пакет загрузки не обеспечивал адекватные активы, я всегда перехожу к источнику сайта demo. Часто разработчик (разработчики) игнорируют различия между dist и демо.

UPDATE

Как я понимаю, проблема заключается в том, что макет должен быть правильно выровнен с виджетами или при отсутствии виджет-боксов. Я не думаю, что использование display:none в виджетах - это способ создания этого шаблона. Рассмотрим следующие аннотированные выдержки из файла, app.min.js

Выдержки из AdminLTE script, app.min.js

Заметки внизу.

/*! AdminLTE app.js
 * ================
 * Main JS application file for AdminLTE v2. This file
 * should be included in all pages. It controls some layout
 * options and implements exclusive AdminLTE plugins.ᵃ
 *
/*...*/†

 $.AdminLTE.boxWidget = {
    selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
    icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
    animationSpeed: $.AdminLTE.options.animationSpeed,
    activate: function (a) {
      var b = this;
      a || (a = document), $(a).on("click", b.selectors.collapse,
        function (a) {
          a.preventDefault(), b.collapse($(this))
        }), $(a).on("click", b.selectors.remove, function (a) {
        a.preventDefault(), b.remove($(this))
      })
    },
   ᵇcollapse: function (a) {
      var b = this,
        c = a.parents(".box").first(),
        d = c.find(
          "> .box-body, > .box-footer, > form  >.box-body, > form > .box-footer"
        );
      c.hasClass("collapsed-box") ? (a.children(":first").removeClass(
        b.icons.open).addClass(b.icons.collapse), d.slideDown(
        b.animationSpeed,
        function () {
          c.removeClass("collapsed-box")
        })) : (a.children(":first").removeClass(b.icons.collapse)
        .addClass(b.icons.open), d.slideUp(b.animationSpeed,
          function () {
            c.addClass("collapsed-box")
          }))
    },
   ᶜ remove: function (a) {
      var b = a.parents(".box").first();
      b.slideUp(this.animationSpeed)
    }
  }
}
if("undefined" == typeof jQuery) throw new Error(
  "AdminLTE requires jQuery");

/*...*/†

 ᵈ function (a) {
    "use strict";
    a.fn.boxRefresh = function (b) {
      function c(a) {
        a.append(f), e.onLoadStart.call(a)
      }

      function d(a) {
        a.find(f).remove(), e.onLoadDone.call(a)
      }
      var e = a.extend({
          trigger: ".refresh-btn",
          source: "",
          onLoadStart: function (a) {
            return a
          },
          onLoadDone: function (a) {
            return a
          }
        }, b),
        f = a(
          '<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
        );
      return this.each(function () {
        if("" === e.source) return void(window.console &&
          window.console.log(
            "Please specify a source first - boxRefresh()")
        );
        var b = a(this),
          f = b.find(e.trigger).first();
        f.on("click", function (a) {
          a.preventDefault(), c(b), b.find(".box-body").load(
            e.source,
            function () {
              d(b)
            })
        })
      })
    }
  }(jQuery),
  function (a) {
    "use strict";
    a.fn.activateBox = function () {
      a.AdminLTE.boxWidget.activate(this)
    }
  }(jQuery)  function (a) {
    "use strict";
    a.fn.boxRefresh = function (b) {
      function c(a) {
        a.append(f), e.onLoadStart.call(a)
      }

      function d(a) {
        a.find(f).remove(), e.onLoadDone.call(a)
      }
      var e = a.extend({
          trigger: ".refresh-btn",
          source: "",
          onLoadStart: function (a) {
            return a
          },
          onLoadDone: function (a) {
            return a
          }
        }, b),
        f = a(
          '<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
        );
      return this.each(function () {
        if("" === e.source) return void(window.console &&
          window.console.log(
            "Please specify a source first - boxRefresh()")
        );
        var b = a(this),
          f = b.find(e.trigger).first();
        f.on("click", function (a) {
          a.preventDefault(), c(b), b.find(".box-body").load(
            e.source,
            function () {
              d(b)
            })
        })
      })
    }
  }(jQuery),
  function (a) {
    "use strict";
    a.fn.activateBox = function () {
      a.AdminLTE.boxWidget.activate(this)
    }
  }(jQuery)

† Этот код пропускается через

ᵃ Разработчик подразумевает, что это приложение не является полным решением, но доступно полное решение для покупки.

ᵇ Коллапс boxwidgets и высота должны соответственно корректироваться.

ᶜ Виджеты могут быть удалены, а высота должна быть соответствующим образом скорректирована.

ᵈ Функция boxRefresh() - это публичный метод, который я считаю. Он может использоваться после добавления или вычитания виджета, который я предполагаю.

Я не лучший в толковании сторонних плагинов, поэтому любые дополнительные замечания и/или исправления приветствуются.

ПОСЛЕДНЕЕ ОБНОВЛЕНИЕ

Я понял, что, когда какой-либо раздел рушится, они будут скользить, а не вниз. Что касается двух основных столбцов, они ведут себя так, как должны, и если первый столбец фактически удален, то второй столбец займет первое место столбца.

Ответ 2

Новый способ выравнивания - использовать flexbox. Вот простой пример, чтобы показать мощность:

HTML:

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.wrapper {
    display: flex;
}

Теперь ваши div внутри .wrapper выровнены в строке.

Кстати, вы можете использовать Autoprefixer, чтобы получить правильные префиксы браузера.
Flexbox поддерживается всеми основными браузерами: http://caniuse.com/#search=flexbox (с префиксами)

С помощью flexbox вы можете выравнивать элементы по своему усмотрению, выравнивая их по вертикали в центре, по горизонтали в центре и т.д.

Ответ 3

Вы можете использовать display: flex, читать дальше: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Постскриптум Но вам нужны префиксы для старых браузеров.

Ответ 4

Вы можете использовать float для размещения полей по горизонтали. Я разветкил ваш Plunker и изменил .box с display: inline-block; на float: left;: http://plnkr.co/edit/Woo31pPiHi4HcvXZ9NXE?p=preview

Ответ 5

После прочтения вашего вопроса и просмотра комментариев я вижу, что тема, которую вы используете, имеет (или вы добавили) twitter bootstrap. Я не уверен, почему вы не будете использовать свою сетку на основе макета, который вы пытаетесь достичь. Посмотрев ссылку на тему, которую вы указали, я вижу этот макет, который содержит 4 горизонтально выровненных виджета, которых должно быть более чем достаточно для того, чего вы пытаетесь достичь.

<section class="content">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- Column 1, example widget code below -->
            <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Messages</span>
                    <span class="info-box-number">1,410</span>
                </div>
            </div>
            <!-- Next widget underneath would go here -->
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- Column 2, add widgets in here -->
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- Column 3, add widgets in here -->
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
            <!-- Column 4, add widgets in here -->
        </div>
    </div>
</section>

Если я не понимаю вопрос, пожалуйста, дайте мне знать. Надеюсь, что это поможет.

EDIT # 2 - Добавлена ссылка CSS и Fiddle

Основываясь на ваших отзывах, вот как я мог бы обрабатывать несколько столбцов

CSS

.cust-table {
    display: table;
    padding: 0;
    width: 100%;
}
.cust-tr {
    display: table-row;
}
.cust-td {
    border-collapse: collapse;
    display: table-cell;
    vertical-align: top;
    background: pink;
    border: 1px solid gray;
    min-width: 100px;
}

HTML

<div class="cust-table">
    <div class="cust-tr">
        <div class="cust-td">
            <!-- Column 1, example widget code below -->
            <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Messages</span>
                    <span class="info-box-number">1,410</span>
                </div>
            </div>
            <!-- Next widget underneath would go here -->
        </div>
        <div class="cust-td">
            <p>Its all bang bang bloddy bang to me!</p>
        </div>
        <div class="cust-td">
            <p>This is another column with text just for fun</p>
        </div>
        <div class="cust-td">
            <p>This is another column with more excitement then the last column. Dont believe me?</p>
        </div>
    </div>
</div>

Таким образом, если вы закончите с 20 столбцами, все они будут отображаться горизонтально. В зависимости от того, насколько широко вы хотите их показать, вы можете использовать min-width, чтобы они не оказались слишком хлюпавшими. Вот ссылка JS.Fiddle, если вы хотите поиграть с макетом.