水平和垂直对齐多个div框

dar*_*dow 31 html javascript css jquery twitter-bootstrap

我正在使用https://almsaeedstudio.com/preview主题,它提供了一些精彩的盒子布局和社交小部件框布局,我想在我的项目中使用它.

请参阅简单的框截图

和社交小工具框

截图.

我试图水平排列多个简单的盒子,每个简单的盒子可以包含多个社交小部件盒子.

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

截图.

我尝试使用现有的简单框和社交小部件框代码,然后想出这个代码片段.

我创建了这个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>
Run Code Online (Sandbox Code Playgroud)

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

但它不起作用.谁能帮助我如何实现这一目标?

PS:我在互联网上搜索过,发现了类似的帖子,但没有一个对我有用. 水平对齐div而不浮动

我仍然是CSS的初学者,如果我能在这里获得一些帮助,我将非常感激.我很长时间以来一直在打破这个问题.

更新

我认为清楚地写出实际问题并尝试逐一解决它们是有道理的.

  1. 如果折叠/展开内部社交窗口小部件框,则水平框不会在同一行上对齐.无论内部社交小部件框高度如何,我如何确保水平框的高度是固定的?请参阅截图. 水平框错位
  2. 有一些答案提到了使用,display: float:left;但我的问题是可变宽度,实际上确保同一行上的所有水平框.
  <div class="" style="width:2050px;">
Run Code Online (Sandbox Code Playgroud)

我如何确保width:2050px;动态增加,因为我将在飞行中添加内盒.PS:我正在为你使用angularjs.是否有任何CSS技巧独立于width:2050px;那种方式将不依赖于总宽度计算.

  1. 如何修复内部社交小部件框的高度?内部社交小部件框溢出实际的horizo​​ntol容器.我怎样才能解决这个问题 ?

  2. 分享我正在努力实现的目标. 多个时间表.

总之,我想用这个主题的现有框和社交小工具框来完成第4点.如果还有其他更好的方法,请分享相同的.

如果有任何不清楚的地方,请随时在评论中提及.我会相应地更新问题.

谢谢

更新2:

I think same height columns is what making this problem more complicated. What I can do is having a scroll bar inside horizontol box which can have multiple social widgets boxes. That way we can have a fixed height for each of the horizontol column.

Update 3:

While zer00ne@ has provided one solution which is based on Flex. I have read on some forums that it doesn;t work on all browsers. Since my web-page is going to be mobile friendly, I;m more inclined towards achieving my desired results using general CSS techniques.

In path of achieving my result, I created following version http://plnkr.co/edit/awVmJWJo0AdrQvdbXG2y?p=preview using this SO thread. Following is screenshot of same:

在此输入图像描述

Now I'm facing one issue of text getting out of inner social widget box. I need some help on this thing.

除此之外,如果这个解决方案更好或没有,人们可以对这些进行审查吗?

谢谢

zer*_*0ne 9

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

这里是真正的解决方案原来的问题,如果有人是真正感兴趣.

黑暗的影子:

虽然zer00ne @提供了一个基于Flex的解决方案.

解决问题看下面我的演示,它说明了一切.我不知道为什么starikovs在没有提供解决方案的情况下完全得到提升.

我不得不重新创建页面,因为<div>你放在标记内的额外无类别的东西令人困惑.重大变化是将flexbox添加到布局中.我使用了两个flexbox容器,一个控制两列.flexRow,另一个控制每个列,以控制widgetbox .flexCol.那些无类别的<div>s被组合成一个<section class="colWrap"I添加的内在测量值,这样你的布局就不会被固定在2050px的固定宽度上,你仍然需要调整两个.box内在的测量值,1000px固定将会给你带来悲伤.当我回来时,这些更改将被注释.除非这不是你想要的吗?

最后到最后更新

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

编辑

只需添加一个固定的高度.colWrap,提出100vh150vh

我检查了两列的高度,它们实际上是相同的小数点.查看截图:

第1栏

第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"/>
Run Code Online (Sandbox Code Playgroud)

UPDATE

还添加了脚本.它位于结束</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>
Run Code Online (Sandbox Code Playgroud)

你可能不需要所有这些,但必要的是:

  • 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.如果下载包没有正确提供足够的资产,我总是去网站的演示源.开发人员经常忽略dist和demo之间的差异.

UPDATE

据我所知,问题是布局需要与widgetbox正确对齐,或者没有widgetbox.我不认为display:none在widgetbox上使用是这个模板的设计方式.考虑以下带注释的文件摘录,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)
Run Code Online (Sandbox Code Playgroud)

†跳过此代码

ᵃ开发人员暗示此应用程序不是一个完整的解决方案,但可以购买完整的解决方案.

ᵇ箱子倒塌,高度应相应调整.

ᶜ该boxwidgets可以被移除和高度作相应调整.

ᵈ该函数boxRefresh()是我认为的公共方法.我可以在添加或减去小部件之后使用它.

我不是最好的解释第三方插件,所以欢迎任何额外的观察和/或更正.

最后更新

我得到它所以当任何部分折叠时,它们会向上滑动而不是向下滑动.至于2个主要列,它们的行为与应有的一样,如果实际删除了第一列,则第二列将占据第一列的位置.


sta*_*ovs 9

  1. 对齐的新方法是使用flexbox.这是一个展示力量的简单示例:

HTML:

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.wrapper {
    display: flex;
}
Run Code Online (Sandbox Code Playgroud)

现在你的内部div .wrapper已经排成一排.

  1. 顺便说一下,您可以使用Autoprefixer获取正确的浏览器前缀.

  2. 所有主流浏览器都支持Flexbox:http://caniuse.com/#search=flexbox (带前缀)

使用flexbox,您可以根据需要对齐项目,在中心垂直对齐,在中心水平对齐等.