it-swarm.com.ru

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

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

Обратитесь к скриншоту простой коробки 

 

и окно социальных виджетов 

 screenshot

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

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

 screenshot

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

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

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="row">
  <div class="col-md-12">
    <div style="overflow:auto;">
      <div class="" style="width:2050px;">
        <div class="box" style="display:inline-block;width:1000px;">
          <div class="box-header with-border">
            <h3 class="box-title">Monthly Recap Report</h3>
            <div class="box-tools pull-right">
              <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <div class="btn-group">
                <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a>
                  </li>
                  <li><a href="#">Another action</a>
                  </li>
                  <li><a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
              </button>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body" style="display: block;">
            <div class="">



              <div class="box box-widget collapsed-box">
                <hr>
                <div class="box-header with-border">
                  <div class="user-block">
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username"><a href="#">Jonathan Burke Jr.</a></span><span class="description">7:30 PM Today</span>
                  </div>
                  <!-- /.user-block-->
                  <div class="box-tools">
                    <button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
                    </button>
                  </div>
                  <!-- /.box-tools-->
                </div>
                <!-- /.box-header-->
                <div class="box-body" style="display: block;">
                  <p>I took this photo this morning. What do you guys think?</p>
                  <button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
                </div>
                <!-- /.box-body-->
                <div class="box-footer box-comments" style="display: block;">
                  <div class="box-comment">
                    <!-- User image-->
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
                    <div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                  <div class="box-comment">
                    <!-- User image-->
                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
                    <div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                </div>
                <!-- /.box-footer-->
                <div class="box-footer" style="display: block;">
                  <form>
                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
                    <div class="img-Push">
                      <input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
                    </div>
                  </form>
                </div>
                <!-- /.box-footer-->
              </div>
              <div class="box box-widget collapsed-box">
                <hr>
                <div class="box-header with-border">
                  <div class="user-block">
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username"><a href="#">Jonathan Burke Jr.</a></span><span class="description">7:30 PM Today</span>
                  </div>
                  <!-- /.user-block-->
                  <div class="box-tools">
                    <button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
                    </button>
                  </div>
                  <!-- /.box-tools-->
                </div>
                <!-- /.box-header-->
                <div class="box-body" style="display: block;">
                  <p>I took this photo this morning. What do you guys think?</p>
                  <button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
                </div>
                <!-- /.box-body-->
                <div class="box-footer box-comments" style="display: block;">
                  <div class="box-comment">
                    <!-- User image-->
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
                    <div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                  <div class="box-comment">
                    <!-- User image-->
                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
                    <div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                </div>
                <!-- /.box-footer-->
                <div class="box-footer" style="display: block;">
                  <form>
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
                    <div class="img-Push">
                      <input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
                    </div>
                  </form>
                </div>
                <!-- /.box-footer-->
              </div>


            </div>
            <!-- /.row -->
          </div>
          <!-- ./box-body -->
          <div class="box-footer" style="display: block;">
            <!-- /.row -->
          </div>
          <!-- /.box-footer -->
        </div>
        <!-- /.box -->

        <div class="box" style="display:inline-block;width:1000px;">
          <div class="box-header with-border">
            <h3 class="box-title">Monthly Recap Report</h3>
            <div class="box-tools pull-right">
              <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <div class="btn-group">
                <button class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-wrench"></i>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action</a>
                  </li>
                  <li><a href="#">Another action</a>
                  </li>
                  <li><a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a>
                  </li>
                </ul>
              </div>
              <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
              </button>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body" style="display: block;">
            <div class="">



              <div class="box box-widget collapsed-box">
                <hr>
                <div class="box-header with-border">
                  <div class="user-block">
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username"><a href="#">Jonathan Burke Jr.</a></span><span class="description">7:30 PM Today</span>
                  </div>
                  <!-- /.user-block-->
                  <div class="box-tools">
                    <button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
                    </button>
                  </div>
                  <!-- /.box-tools-->
                </div>
                <!-- /.box-header-->
                <div class="box-body" style="display: block;">
                  <p>I took this photo this morning. What do you guys think?</p>
                  <button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
                </div>
                <!-- /.box-body-->
                <div class="box-footer box-comments" style="display: block;">
                  <div class="box-comment">
                    <!-- User image-->
                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
                    <div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                  <div class="box-comment">
                    <!-- User image-->
                    <img src="../dist/img/user4-128x128.jpg" alt="user image" class="img-circle img-sm">
                    <div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                </div>
                <!-- /.box-footer-->
                <div class="box-footer" style="display: block;">
                  <form>
                    <img class="img-responsive img-circle img-sm" src="../dist/img/user4-128x128.jpg" alt="alt text">
                    <div class="img-Push">
                      <input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
                    </div>
                  </form>
                </div>
                <!-- /.box-footer-->
              </div>
              <div class="box box-widget collapsed-box">
                <hr>
                <div class="box-header with-border">
                  <div class="user-block">
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad"><span class="username"><a href="#">Jonathan Burke Jr.</a></span><span class="description">7:30 PM Today</span>
                  </div>
                  <!-- /.user-block-->
                  <div class="box-tools">
                    <button data-widget="collapse" class="btn btn-box-tool"><i class="fa fa-plus"></i>
                    </button>
                  </div>
                  <!-- /.box-tools-->
                </div>
                <!-- /.box-header-->
                <div class="box-body" style="display: block;">
                  <p>I took this photo this morning. What do you guys think?</p>
                  <button class="btn btn-default btn-xs"><i class="fa fa-thumbs-o-up"></i> Like</button><span class="pull-right text-muted">127 likes - 3 comments</span>
                </div>
                <!-- /.box-body-->
                <div class="box-footer box-comments" style="display: block;">
                  <div class="box-comment">
                    <!-- User image-->
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
                    <div class="comment-text"><span class="username">Maria Gonzales<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                  <div class="box-comment">
                    <!-- User image-->
                    <img src="../dist/img/user4-128x128.jpg" alt="user image" class="img-circle img-sm">
                    <div class="comment-text"><span class="username">Luna Stark<span class="text-muted pull-right">8:03 PM Today</span></span>
                      <!-- /.username-->It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                    </div>
                    <!-- /.comment-text-->
                  </div>
                  <!-- /.box-comment-->
                </div>
                <!-- /.box-footer-->
                <div class="box-footer" style="display: block;">
                  <form>
                    <img src="../dist/img/photo2.png" alt="Photo" class="img-responsive pad">
                    <div class="img-Push">
                      <input type="text" placeholder="Press enter to post comment" class="form-control input-sm">
                    </div>
                  </form>
                </div>
                <!-- /.box-footer-->
              </div>


            </div>
            <!-- /.row -->
          </div>
          <!-- ./box-body -->
          <div class="box-footer" style="display: block;">
            <!-- /.row -->
          </div>
          <!-- /.box-footer -->
        </div>


      </div>
      <!-- /.col -->
    </div>
  </div>
</div>
  </body>

</html>

http://plnkr.co/edit/slpJLIRVGfMSC8JWG1bT?p=preview

Но это не работает. Может кто-нибудь, пожалуйста, помогите мне, как это сделать?

П.С .: Я искал в интернете и нашел похожие темы, но ни одна из них не работает для меня . Горизонтальное выравнивание div без плавающей запятой

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

Обновление

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

  1. Горизонтальные блоки не выровнены в одной строке, если внутренний блок социальных виджетов свернут/развернут. Как я могу обеспечить фиксированную высоту горизонтального блока независимо от высоты внутреннего блока социальных виджетов? Смотрите на скриншот для того же .  Mis-alignment of horizontal boxes
  2. Есть несколько ответов, в которых упоминается использование display: float:left;, но моя проблема заключается в переменной ширине, которая фактически обеспечивает все горизонтальные блоки в одной строке.
  <div class="" style="width:2050px;">

Как обеспечить динамическое увеличение width:2050px;, поскольку я буду добавлять внутренние блоки на лету. П.С .: Я использую angularjs для пользовательского интерфейса. Есть ли какой-нибудь трюк CSS, который не зависит от width:2050px;. Таким образом, не будет никакой зависимости от вычисления общей ширины.

  1. Как исправить высоту внутреннего окна социального виджета? Внутренняя социальная ячейка виджета переполняет фактический горизонтальный контейнер. Как я могу это исправить ?

  2. Поделиться изображением того, чего я на самом деле пытаюсь достичь.  Multiple Timelines

Короче говоря, я хочу выполнить пункт 4 с помощью this существующих ящиков темы и ящиков социальных виджетов. Если есть какой-либо другой лучший способ сделать это, пожалуйста, поделитесь тем же.

В случае, если что-то не понятно, пожалуйста, не стесняйтесь упомянуть об этом в комментарии. Я обновлю вопрос соответственно.

Спасибо

Обновление 2:

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

Обновление 3:

В то время как zer00ne @ предоставил одно решение, основанное на Flex. Я читал на некоторых форумах, что он работает не во всех браузерах. Поскольку моя веб-страница будет удобной для мобильных устройств, я более склонен к достижению желаемых результатов с использованием общих методов CSS.

На пути к достижению моего результата я создал следующую версию http://plnkr.co/edit/awVmJWJo0AdrQvdbXG2y?p=preview , используя этот SO thread . Ниже приведен скриншот того же:

 enter image description here

Теперь я столкнулся с одной проблемой выхода текста из внутреннего окна социальных виджетов. Мне нужна помощь в этом деле.

В дополнение к этому, могут ли люди пересмотреть их, если это решение лучше или нет?

Спасибо

31
dark_shadow

>>>>>>>>>>>>>>>>>>>> FLEXBOX SOLUTION <<<<<<<<<<<<<<<<<<<<

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

dark_shadow:

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

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

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

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

>>>>>>>>>> PLUNKER <<<<<<<<<<

РЕДАКТИРОВАТЬ

Просто добавьте фиксированную высоту к .colWrap, предложите от 100vh до 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"/>

ОБНОВИТЬ

Также добавлен скрипт. Он находится перед закрывающим тегом </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 и demo.

ОБНОВИТЬ

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

Выдержки из сценария AdminLTE, 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)

† Этот код пропущен

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

Box Свернуть и виджеты boxwidget следует настроить соответствующим образом.

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

Believe Функция boxRefresh(), на мой взгляд, является публичным методом. Я мог бы использовать его после сложения или вычитания виджета.

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

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

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

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

HTML:

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

CSS:

.wrapper {
    display: flex;
}

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

  1. Кстати, вы можете использовать Autoprefixer , чтобы получить правильные префиксы браузера. 

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

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

8
starikovs

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

1
pgrekovich

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

0
Erik Djupvik

После прочтения вашего вопроса и просмотра комментариев, я вижу, что используемая вами тема имеет (или вы добавили) загрузчик Twitter. Я не уверен, почему вы не использовали бы его сеточную систему, основанную на макете, который вы пытаетесь достичь. Глядя на предоставленную вами ссылку на тему, я вижу этот макет, который содержит 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 , если вы хотите поиграть с макетом.

0
crazymatt