web-dev-qa-db-fra.com

Aligner plusieurs boîtes div horizontalement et verticalement

J'utilise https://almsaeedstudio.com/preview un thème qui donne une mise en page brillante de cases et une disposition de cases de widgets sociaux que je souhaite utiliser dans mon projet.

Reportez-vous à la capture d'écran simple boîte

et boîte de widget sociale

screenshot .

J'essaie de disposer plusieurs boîtes simples horizontalement, chacune pouvant contenir plusieurs boîtes de widgets sociaux.

Reportez-vous à cette capture d'écran pour plus de clarté:

screenshot .

J'ai essayé de jouer avec les anciennes boîtes simples et le code de boîtes de widgets sociaux et de proposer cet extrait.

J'ai créé ce plunker, css n'est pas chargé correctement.

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

Mais ça ne marche pas. Quelqu'un peut-il m'aider s'il vous plaît comment y parvenir?

P.S .: J'ai cherché sur Internet et trouvé des discussions similaires, mais aucune ne fonctionne pour moi. aligner horizontalement div sans float

Je suis toujours débutant en CSS et j'apprécierais vraiment si je pouvais obtenir de l'aide ici. Je me casse la tête depuis longtemps.

Mise à jour

Je pense qu'il est logique d'écrire clairement les problèmes actuels et d'essayer de les résoudre un à un.

  1. Les cases horizontales ne sont pas alignées sur la même ligne si la case du widget social interne est réduite/développée. Comment puis-je m'assurer que la hauteur de la boîte horizontale est fixée quelle que soit la hauteur de la boîte du widget social interne? Reportez-vous à la capture d'écran pour les mêmes. Mis-alignment of horizontal boxes
  2. Certaines réponses mentionnent l'utilisation de display: float:left;, mais mon problème est la largeur variable qui assure en fait toutes les cases horizontales sur la même ligne.
  <div class="" style="width:2050px;">

Comment puis-je m'assurer que le width:2050px; augmentera de façon dynamique au fur et à mesure que j'ajouterai des boîtes intérieures à la volée. P.S .: J'utilise angularjs pour ui. Existe-t-il une astuce CSS indépendante du width:2050px;? De cette manière, il n'y aura pas de dépendance au calcul de la largeur totale.

  1. Comment réparer la hauteur de la boîte de widget social interne? La zone de widget social interne déborde du conteneur horizontol réel. Comment puis-je réparer cela ?

  2. Partager une image de ce que j'essaie d'accomplir. Multiple Timelines .

En bref, je veux accomplir le point 4 avec ceci les boîtes existantes du thème et les boîtes de widgets sociaux. S'il y a une autre meilleure façon de le faire, veuillez partager la même chose.

Au cas où quelque chose ne serait pas clair, n'hésitez pas à le mentionner en commentaire. Je mettrai à jour la question en conséquence.

Merci

Mise à jour 2:

Je pense que ce sont les mêmes colonnes de hauteur qui rendent ce problème plus compliqué. Ce que je peux faire, c'est d'avoir une barre de défilement à l'intérieur de la boîte horizontol qui peut avoir plusieurs boîtes de widgets sociaux. De cette façon, nous pouvons avoir une hauteur fixe pour chacune des colonnes horizontol.

Update 3:} _

Alors que zer00ne @ a fourni une solution basée sur Flex. J'ai lu sur certains forums que cela ne fonctionne pas sur tous les navigateurs. Étant donné que ma page Web sera adaptée aux appareils mobiles, je suis plus encline à obtenir les résultats souhaités à l’aide des techniques CSS générales.

Afin d’atteindre mon résultat, j’ai créé la version suivante http://plnkr.co/edit/awVmJWJo0AdrQvdbXG2y?p=preview en utilisant ce SO fil . Voici une capture d'écran de même:

enter image description here

Maintenant, je suis confronté à un problème de sortie de texte de la boîte de widgets sociaux internes. J'ai besoin d'aide sur cette chose.

En plus de cela, les gens peuvent-ils examiner si ces solutions sont meilleures ou non?

Merci

javascriptjqueryhtmlcsstwitter-bootstrap
31
dark_shadow

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

Voici le REAL SOLUTION au QUESTION ORIGINALE si quelqu'un est réellement intéressé.

dark_shadow:

Alors que zer00ne @ a fourni une solution basée sur Flex.

Problème résolu, voir mes démos ci-dessous, il parle pour lui-même. Je ne comprends pas du tout pourquoi Starikovs reçoit des votes alors qu'il n'y a manifestement pas de solution.

J'ai dû recréer la page parce que les <div>s sans classe supplémentaires que vous avez placés dans le balisage prêtaient à confusion. Le changement important a été l'ajout de flexbox à la mise en page. J'ai utilisé deux conteneurs Flexbox, l'un contrôlant les deux colonnes .flexRow et l'autre à l'intérieur de chaque colonne pour contrôler les widgets, .flexCol. Ces <div>s sans classe sont combinés dans un <section class="colWrap". J'ai ajouté des mesures intrinsèques pour que votre mise en page ne soit pas bloquée sur une largeur fixe de 2050px. Vous devrez toujours ajuster les deux .box à une mesure intrinsèque. futur. Les modifications seront annotées à mon retour. A moins que ce ne soit pas ce que tu voulais?

de la dernière à la dernière mise à jour

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

EDIT

Ajoutez simplement une hauteur fixe à .colWrap, suggérez 100vh à 150vh

J'ai vérifié la hauteur des deux colonnes et elles sont identiques à la décimale. Voir les screenshots:

Colonne 1

Colonne 2

VIEUX

Vous avez juste besoin de tout aligner, correct? Ok, regardez ici s'il vous plaît: http://embed.plnkr.co/MRI69qLoTkiL9F68g54M/preview

J'ai ajouté ceci au <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

Ajout du script aussi. Il se situe avant la balise </body> de fermeture.

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

Vous n'avez probablement pas besoin de tous, mais les éléments essentiels sont:

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

Il y a beaucoup d'URL relatives (ex. ../Dist/img/photo2.png), alors j'ai ajouté ce qui suit en haut du <head>:

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

La majorité de ces fichiers externes sont situés dans cette URL de base. Si le package de téléchargement ne fournit pas correctement les ressources adéquates, je vais toujours à la source du site demo . Souvent, le ou les développeurs négligent les différences entre dist et la démo.

UPDATE

Si je comprends bien, le problème est que la mise en page doit être correctement alignée sur les widgets ou en l’absence de widgets. Je ne pense pas que l'utilisation de display:none sur des widgets soit la manière dont ce modèle a été conçu. Considérez les extraits annotés suivants du fichier, app.min.js

Extraits du script AdminLTE, app.min.js

Notes en bas.

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

† Ce code est sauté

Developer Le développeur implique que cette application n'est pas une solution complète, mais une solution complète est disponible à l'achat.

Box Les boxwidgets se réduisent et la hauteur devrait s’ajuste en conséquence.

Box Les boxwidgets peuvent être supprimés et la hauteur devrait être ajustée en conséquence.

ᵈ La fonction boxRefresh() est une méthode publique, je crois. Il pourrait être utilisé après une addition ou une soustraction d'un widget, je suppose.

Je ne suis pas le meilleur pour interpréter les plugins tiers, donc toute observation supplémentaire et/ou correction est la bienvenue.

DERNIÈRE MISE À JOUR

Je l’ai compris afin que chaque section soit réduite, elle glisse vers le haut plutôt que vers le bas. En ce qui concerne les 2 colonnes principales, elles se comportent comme elles le devraient et si la première colonne est réellement supprimée, la deuxième colonne prendra la place de la première colonne.

9
zer00ne
  1. La nouvelle méthode d'alignement consiste à utiliser flexbox . Voici un simple exemple pour montrer le pouvoir:

HTML:

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

CSS:

.wrapper {
    display: flex;
}

Maintenant vos divs dans .wrapper sont alignés.

  1. En passant, vous pouvez utiliser Autoprefixer pour obtenir les préfixes de navigateur appropriés.

  2. Flexbox est supporté par tous les principaux navigateurs: http://caniuse.com/#search=flexbox (avec préfixes)

Avec Flexbox, vous pouvez simplement aligner les éléments à votre guise, en les alignant verticalement au centre, horizontalement au centre, etc.

8
starikovs

Vous pouvez utiliser display: flex, en savoir plus: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ P.S. Mais vous devez utiliser les préfixes pour les anciens navigateurs

1
pgrekovich

Vous pouvez utiliser float pour positionner les boîtes horizontalement. J'ai bifurqué votre Plunker et changé le .box de display: inline-block; à float: left;: http://plnkr.co/edit/Woo31pPiHi4HcvXZ9NXE?p=preview

0
Erik Djupvik

Après avoir lu votre question et parcouru les commentaires, je vois que le thème que vous utilisez a (ou vous avez ajouté) le bootstrap de Twitter. Je ne suis pas sûr de savoir pourquoi vous n'utiliseriez pas son système de grille basé sur la disposition que vous essayez de réaliser. En regardant le lien de thème que vous avez fourni, je vois cette mise en page qui contient 4 widgets alignés horizontalement, ce qui devrait être plus que suffisant pour ce que vous essayez d'atteindre.

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

Si je comprends mal la question, veuillez me le faire savoir. J'espère que cela pourra aider.

EDIT # 2 - Ajout de CSS et Fiddle link

Sur la base de vos commentaires, voici comment je gérerais les multiples colonnes

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>

De cette façon, si vous vous retrouvez avec 20 colonnes, elles seront toutes affichées horizontalement. En fonction de votre largeur d'affichage, vous pouvez utiliser min-width pour éviter qu'ils ne soient trop écrasés. Voici un lien JS.Fiddle si vous voulez jouer avec la mise en page.

0
crazymatt