web-dev-qa-db-de.com

Horizontales und vertikales Ausrichten mehrerer Div-Boxen

Ich verwende das Thema https://almsaeedstudio.com/preview , das ein brillantes Layout für Boxen und ein Layout für soziale Widget-Boxen bietet, das ich in meinem Projekt verwenden möchte.

Siehe Screenshot der einfachen Box

 

und Social Widget Box

 screenshot .

Ich versuche, mehrere einfache Felder horizontal anzuordnen, wobei jedes der einfachen Felder mehrere soziale Widgetfelder enthalten kann.

Weitere Informationen finden Sie in diesem Screenshot:

 screenshot .

Ich habe versucht, mit dem aufregenden Code für einfache Boxen und soziale Widget-Boxen zu spielen, und mir dieses Snippet ausgedacht.

Ich habe diesen Plunker erstellt, irgendwie wird CSS nicht richtig geladen.

<!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

Aber es funktioniert nicht. Kann mir bitte jemand helfen, wie das geht?

P.S .: Ich habe im Internet gesucht und ähnliche Themen gefunden, aber keine funktioniert für mich. Div ohne Schwimmer horizontal ausrichten

Ich bin noch ein Anfänger in CSS und würde mich sehr freuen, wenn ich hier etwas Hilfe bekommen kann. Ich breche mir schon lange den Kopf.

Update

Ich halte es für sinnvoll, die eigentlichen Probleme klar aufzuschreiben und nacheinander zu lösen.

  1. Horizontale Felder werden nicht in derselben Zeile ausgerichtet, wenn das innere soziale Widget-Feld reduziert/erweitert ist. Wie kann ich sicherstellen, dass die Höhe der horizontalen Box unabhängig von der Höhe der inneren Box des sozialen Widgets festgelegt wird? Siehe auch Screenshot.  Mis-alignment of horizontal boxes
  2. Es gibt einige Antworten, die die Verwendung von display: float:left; erwähnen, aber mein Problem ist die variable Breite, die tatsächlich alle horizontalen Kästchen in derselben Zeile sicherstellt.
  <div class="" style="width:2050px;">

Wie stelle ich sicher, dass sich der width:2050px; dynamisch erhöht, wenn ich im laufenden Betrieb innere Kästchen hinzufüge? P .: Ich benutze Angularjs für die Benutzeroberfläche. Gibt es einen CSS-Trick, der vom width:2050px; unabhängig ist? Auf diese Weise besteht keine Abhängigkeit von der Berechnung der Gesamtbreite.

  1. Wie kann man die Höhe des inneren sozialen Widgets festlegen? Das innere soziale Widget-Feld überläuft den eigentlichen horizontalen Container. Wie kann ich das beheben?

  2. Teilen Sie ein Bild von dem, was ich eigentlich zu erreichen versuche.  Multiple Timelines .

Kurz gesagt, ich möchte Punkt 4 mit this den vorhandenen Boxen und sozialen Widget-Boxen des Themas erreichen. Wenn es dafür eine bessere Möglichkeit gibt, teilen Sie uns dies bitte mit.

Falls etwas nicht klar ist, können Sie es gerne in einem Kommentar erwähnen. Ich werde die Frage entsprechend aktualisieren.

Vielen Dank

Update 2:

Ich denke, Spalten gleicher Höhe erschweren dieses Problem. Was ich tun kann, ist eine Bildlaufleiste in der horizontalen Box, die mehrere soziale Widgets-Boxen haben kann. Auf diese Weise können wir für jede horizontale Spalte eine feste Höhe festlegen.

Update 3:

Während zer00ne @ eine Lösung zur Verfügung gestellt hat, die auf Flex basiert. Ich habe in einigen Foren gelesen, dass es nicht in allen Browsern funktioniert. Da meine Webseite für Handys geeignet sein wird, neige ich eher dazu, meine gewünschten Ergebnisse mit allgemeinen CSS-Techniken zu erzielen.

Um mein Ergebnis zu erzielen, habe ich die folgende Version http://plnkr.co/edit/awVmJWJo0AdrQvdbXG2y?p=preview mit diesem SO Thread erstellt. Es folgt ein Screenshot davon:

 enter image description here

Jetzt stelle ich eine Ausgabe des Textes gegenüber, der aus innerem Sozialwidgetkasten herauskommt. Ich brauche Hilfe in dieser Sache.

Können sich die Leute darüber hinaus einen Überblick verschaffen, ob diese Lösung besser ist oder nicht?

Vielen Dank

31
dark_shadow

>>>>>>>>>>>>>>>>>>>> FLEXBOX-LÖSUNG <<<<<<<<<<<<<<<<<<<<

Hier ist die WIRKLICHE LÖSUNG zur URSPRÜNGLICHEN FRAGE falls jemand tatsächlich interessiert ist.

dunkler Schatten:

Während zer00ne @ eine Lösung zur Verfügung gestellt hat, die auf Flex basiert.

Problem gelöst siehe meine Demos unten, es spricht für sich. Ich habe keine Ahnung, warum Starikovs überhaupt Stimmen bekommen, wenn es eindeutig keine Lösung gibt.

Ich musste die Seite neu erstellen, weil der zusätzliche klassenlose <div>s, den Sie in das Markup eingefügt haben, verwirrend war. Die wesentliche Änderung war das Hinzufügen von Flexbox zum Layout. Ich habe zwei Flexbox-Container verwendet, einen, der die beiden Spalten .flexRow und einen anderen innerhalb jeder Spalte kontrollierte, um die Widgetboxen .flexCol zu steuern. Diese klassenlosen <div>s werden zu einem <section class="colWrap" kombiniert. Ich habe intrinsische Messungen hinzugefügt, damit Ihr Layout nicht bei einer festen Breite von 2050px hängen bleibt. Sie müssen weiterhin beide .boxs an eine intrinsische Messung anpassen Zukunft. Die Änderungen werden kommentiert, wenn ich zurückkomme. Es sei denn natürlich, das ist nicht das, was du wolltest?

LETZT zum LETZTEN UPDATE

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

EDIT

Fügen Sie einfach eine feste Höhe zu .colWrap hinzu, schlagen Sie 100vh zu 150vh vor

Ich habe die Höhe beider Spalten überprüft und sie sind tatsächlich bis auf die Dezimalstelle identisch. Siehe die Screenshots:

Spalte 1

Spalte 2


ALT

Sie brauchen nur alles ausgerichtet, richtig? Ok, schauen Sie bitte hier: http://embed.plnkr.co/MRI69qLoTkiL9F68g54M/preview

Ich habe dies zum <head> hinzugefügt

<!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

Das Skript wurde ebenfalls hinzugefügt. Es befindet sich vor dem schließenden Tag </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>

Sie brauchen wahrscheinlich nicht alle, aber die wesentlichen sind:

  • bootstrap.min.css
  • font-awesome.min.css
  • jQuery-2.1.4.min.js
  • bootstrap.min.js
  • app.min.js
  • jquery.slimscroll.min.js

Es gibt viele relative URLs (z. B. ../dist/img/photo2.png), daher habe ich am Anfang des <head> Folgendes hinzugefügt:

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

Die meisten dieser externen Dateien befinden sich in dieser Basis-URL. Wenn das Download-Paket keine ausreichenden Ressourcen bietet, gehe ich immer zur Quelle der Demo . Häufig vernachlässigen die Entwickler die Unterschiede zwischen dist und dem Demo.

UPDATE

Soweit ich weiß, besteht das Problem darin, dass das Layout ordnungsgemäß an Widgetboxen ausgerichtet werden muss oder Widgetboxen fehlen. Ich denke nicht, dass die Verwendung von display:none für Widgetboxen die Art und Weise ist, wie diese Vorlage entworfen wurde. Betrachten Sie die folgenden kommentierten Auszüge aus der Datei: app.min.js

Auszüge aus dem AdminLTE-Skript, app.min.js

Notizen unten.

/*! 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)

† Dieser Code wird übersprungen

ᵃ Der Entwickler impliziert, dass diese App keine Komplettlösung ist, sondern eine Komplettlösung zum Kauf angeboten wird.

ᵇ Die Box-Widgets reduzieren sich und die Höhe sollte wird entsprechend angepasst.

ᶜ Die Boxwidgets können entfernt und die Höhe sollte entsprechend angepasst werden.

ᵈ Die Funktion boxRefresh() ist eine öffentliche Methode, von der ich glaube. Es könnte nach einer Addition oder Subtraktion eines Widgets verwendet werden, nehme ich an.

Ich kann Plugins von Drittanbietern nicht optimal interpretieren, daher sind zusätzliche Beobachtungen und/oder Korrekturen willkommen.

LETZTES UPDATE

Ich habe es so verstanden, dass wenn ein Abschnitt eingeklappt ist, er eher nach oben als nach unten gleitet. Die beiden Hauptspalten verhalten sich so, wie sie sollten. Wenn die erste Spalte tatsächlich entfernt wird, nimmt die zweite Spalte den Platz der ersten Spalte ein.

9
zer00ne
  1. Die neue Art des Ausrichtens ist die Verwendung von flexbox . Hier ist ein einfaches Beispiel , um die Kraft zu zeigen:

HTML:

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

CSS:

.wrapper {
    display: flex;
}

Jetzt sind Ihre Divs in .wrapper in einer Reihe ausgerichtet.

  1. Übrigens können Sie Autoprefixer verwenden, um die richtigen Browser-Präfixe zu erhalten.

  2. Flexbox wird von allen gängigen Browsern unterstützt: http://caniuse.com/#search=flexbox (mit Präfixen)

Mit der Flexbox können Sie Elemente einfach nach Belieben ausrichten, indem Sie sie vertikal in der Mitte, horizontal in der Mitte usw. ausrichten.

8
starikovs

Sie können display: flex verwenden. Weitere Informationen finden Sie unter: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ P.S. Sie benötigen jedoch Präfixe für alte Browser

1
pgrekovich

Sie können float verwenden, um die Boxen horizontal zu positionieren. Ich habe Ihren Plunker gegabelt und den .box von display: inline-block; in float: left; geändert: http://plnkr.co/edit/Woo31pPiHi4HcvXZ9NXE?p=preview

0
Erik Djupvik

Nachdem ich Ihre Frage gelesen und die Kommentare durchgesehen habe, sehe ich, dass das von Ihnen verwendete Thema einen Twitter-Bootstrap enthält (oder hinzugefügt hat). Ich bin mir nicht sicher, warum Sie das Rastersystem nicht basierend auf dem von Ihnen angestrebten Layout verwenden würden. Wenn ich den von Ihnen bereitgestellten Themenlink betrachte, sehe ich dieses Layout, das 4 horizontal ausgerichtete Widgets enthält, die mehr als genug für das sein sollten, was Sie erreichen möchten.

<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>

Wenn ich die Frage missverstehe, lassen Sie es mich bitte wissen. Hoffentlich hilft das.

BEARBEITEN # 2 - CSS und Fiddle Link hinzugefügt

Basierend auf Ihrem Feedback hier ist, wie ich mit den mehreren Spalten umgehen würde

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>

Auf diese Weise werden am Ende 20 Spalten horizontal angezeigt. Abhängig davon, wie breit sie sein sollen, können Sie min-width verwenden, damit sie nicht zu eng werden. Hier ist ein JS.Fiddle Link wenn Sie mit dem Layout herumspielen möchten.

0
crazymatt