javascript - 水平和垂直对齐多个 div 框

标签 javascript jquery html css twitter-bootstrap

我正在使用 https://almsaeedstudio.com/preview主题，它提供了一些我想在我的元素中使用的精彩框布局和社交小部件框布局。

引用简单框截图

和社交小部件框

screenshot .

我正在尝试水平排列多个简单框，其中每个简单框都可以包含多个社交小部件框。

请参阅此屏幕截图以获得更清晰的信息:

screenshot .

我尝试使用现有的简单框和社交小部件框代码，并想出了这个片段。

我已经创建了这个 plunker，不知何故没有正确加载 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

但是它不起作用。谁能帮我实现这个目标？

P.S.:我在互联网上搜索并找到了类似的线程，但没有一个适合我。 Horizontally align div without float

我仍然是 CSS 的初学者，如果能在这里得到一些帮助，我将不胜感激。很长一段时间以来，我都在为此伤脑筋。

更新

我认为清楚地写出实际问题并尝试逐一解决是有意义的。

  1. 如果折叠/展开内部社交小部件框，水平框不会在同一行对齐。无论内部社交小部件框的高度如何，如何确保水平框的高度是固定的？请参阅屏幕截图。 Mis-alignment of horizontal boxes
  2. 有一些答案提到了 display: float:left; 的使用，但我的问题是可变宽度，它实际上确保了同一行上的所有水平框。
  <div class="" style="width:2050px;">

如何确保 width:2050px; 动态增加，因为我将动态添加内部框。 P.S.:我正在为 ui 使用 angularjs。是否有任何独立于 width:2050px; 的 CSS 技巧，这样就不会依赖于总宽度的计算。

  1. 如何固定内部社交小部件框的高度？内部社交小部件框溢出了实际的水平容器。我该如何解决这个问题？

  2. 分享我实际想要完成的事情的图片。 Multiple Timelines .

简而言之，我想用 this 完成第 4 点主题的现有框和社交小部件框。如果还有其他更好的方法，请分享。

如有不明之处欢迎在评论中提出。我会相应地更新问题。

谢谢

更新 2:

我认为相同高度的列会使这个问题变得更加复杂。我能做的是在水平框内有一个滚动条，它可以有多个社交小部件框。这样我们就可以为每个水平列设置一个固定的高度。

更新 3:

而zer00ne@提供了一种基于Flex的解决方案。我在一些论坛上读到它不适用于所有浏览器。由于我的网页将对移动设备友好，因此我更倾向于使用通用 CSS 技术实现我想要的结果。

为了实现我的结果，我创建了以下版本 http://plnkr.co/edit/awVmJWJo0AdrQvdbXG2y?p=preview使用这个 SO thread .以下是相同的屏幕截图:

enter image description here

现在我面临一个文本超出内部社交小部件框的问题。我在这件事上需要一些帮助。

除此之外，人们是否可以对这些解决方案是否更好进行审查？

谢谢

最佳答案

>>>>>>>>>>>>>>>>>>>>FLEXBOX解决方案<<<<<<<<<<<<<<<<<<<

这是原始问题的真正的解决方案，如果有人真正感兴趣的话。

暗影:

While zer00ne@ has provided one solution which is based on Flex.

问题已解决，请参阅下面的演示，它不言自明。我不知道为什么 starikovs 在显然没有提供解决方案的情况下却得到了支持。

我不得不重新创建页面，因为额外的无类 <div>您放置在标记内的 s 令人困惑。显着的变化是将 flexbox 添加到布局中。我使用了两个 flexbox 容器，一个控制两列 .flexRow和每列的另一个内部来控制小部件框，.flexCol .那些无类(Class)<div> s 组合成一个 <section class="colWrap"我添加了内部测量值，这样您的布局就不会停留在 2050 像素的固定宽度，您仍然需要同时调整 .box对于内在测量，固定 1000px 会在未来带来悲伤。当我回来时，更改将被注释。当然，除非这不是您想要的？

上次更新

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

编辑

给.colWrap加上一个固定的高度就行了, 建议 100vh至 150vh

我检查了两列的高度，它们实际上完全相同，小数点以下。查看屏幕截图:

Column 1

Column 2

老

您只需要对齐所有内容，对吗？好的，请看这里: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
  • font-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在 widgetboxes 上是这个模板的设计方式。考虑文件中的以下注释摘录，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)

† 此代码被跳过

ᵃ 开发人员暗示此应用不是完整的解决方案，但可以购买完整的解决方案。

ᵇ boxwidgets 折叠和高度应该相应调整。

ᶜ 可以删除框小部件，并且应该相应地调整高度。

ᵈ 函数 boxRefresh()我相信这是一种公共(public)方法。我想它可以在添加或减去一个小部件后使用。

我不是最擅长解释第三方插件的，所以欢迎任何额外的意见和/或更正。

最后更新

我明白了，所以当任何部分折叠时，它们会向上滑动而不是向下滑动。至于 2 个主要列，它们会正常运行，如果实际上删除了第一列，则第二列将取代第一列。

关于javascript - 水平和垂直对齐多个 div 框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32414345/

上一篇：javascript - 扩展 `super()` 时使用 `Object`

下一篇：javascript - 如何使用 Javascript 在 HTML 页面中将 XML 显示为可折叠和可展开的树？

相关文章：

javascript - 如何使用codeigniter中的 'set interval'函数进行数据库自动备份？

javascript - Bootstrap 多选选项的完整显示被剪裁为下拉菜单上的设置宽度

javascript - jquery 在 Chrome 中平滑滚动而不是在 Internet Explorer 中

jquery css 背景图像仅适用于 firefox

html - 面板内对齐面板的 CSS 问题

javascript - 导航栏定期出现和消失

html - 如何在 iframe 中添加停止按钮？

javascript - 在 for 循环中创建新对象 - Javascript

Javascript - 检查对象的优雅方法是否具有必需的属性

javascript - 动态表单不提交(jQuery)

©2024 IT工具网  联系我们