【问题标题】:Aligning multiple div boxes horizontally and vertically水平和垂直对齐多个 div 框
【发布时间】:2015-12-01 13:46:07
【问题描述】:

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

参考简单框截图

和社交小部件框

。

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

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

。

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

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

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

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

  2. 分享我实际尝试完成的工作的图像。 。

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

如有不清楚之处,请随时在评论中提及。我会相应地更新问题。

谢谢

更新 2:

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

更新 3:

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

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

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

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

谢谢

【问题讨论】:

  • sn-p 不工作。很难猜出你想做什么。你还在为浮动而苦苦挣扎吗?
  • 不,我不只是在浮动问题上苦苦挣扎,还有一个更大的问题……您可以简单地将整个 sn-p 插入原始 html 页面中……我正在做一个plunker 也..这样我认为人们可以更好地理解问题
  • 请参考我创建的 plnkr,不知何故 css 没有正确加载,但至少它应该能够让您了解我到底想要做什么
  • 另外,请参阅问题中的最后一个屏幕截图,它会让您了解我到底想要做什么
  • 我问你:你可以使用CSS框架吗?使用 Foundation Equalizer(使您希望高度相等的所有框)和 display:inline-block 元素中的 vertical-align: top 可以解决问题。

标签: javascript jquery html css twitter-bootstrap


【解决方案1】:

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

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

暗影:

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

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

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

最后一次更新

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

编辑

给.colWrap加一个固定高度,建议100vh给150vh

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

Column 1

Column 2


旧

您只需要对齐所有内容,对吗?好的,请看这里:http://embed.plnkr.co/MRI69qLoTkiL9F68g54M/preview

我将此添加到&lt;head&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"/>

更新

也添加了脚本。它位于结束 &lt;/body&gt; 标记之前。

<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),所以我在 &lt;head&gt; 的顶部添加了以下内容:

&lt;base href="https://almsaeedstudio.com/themes/AdminLTE/"&gt;

这些外部文件中的大部分都位于该基本 url。如果下载包没有正确提供足够的资源,我总是去网站的demo 的来源。开发人员经常忽略 dist 和 demo 之间的差异。

更新

据我了解,问题在于布局需要与小部件框或在没有小部件框的情况下正确对齐。我不认为在 widgetboxes 上使用 display:none 是这个模板的设计方式。考虑以下文件中的注释摘录,app.min.js

AdminLTE 脚本的摘录,app.min.js

注释在底部。

/*! AdminLTE app.js
 * ================
 * Main JS application file for AdminLTE v2. This file
 * should be included in all pages. It controls some layout
 * options and implements exclusive AdminLTE plugins.ᵃ
 *
/*...*/†

 $.AdminLTE.boxWidget = {
    selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
    icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
    animationSpeed: $.AdminLTE.options.animationSpeed,
    activate: function (a) {
      var b = this;
      a || (a = document), $(a).on("click", b.selectors.collapse,
        function (a) {
          a.preventDefault(), b.collapse($(this))
        }), $(a).on("click", b.selectors.remove, function (a) {
        a.preventDefault(), b.remove($(this))
      })
    },
   ᵇcollapse: function (a) {
      var b = this,
        c = a.parents(".box").first(),
        d = c.find(
          "> .box-body, > .box-footer, > form  >.box-body, > form > .box-footer"
        );
      c.hasClass("collapsed-box") ? (a.children(":first").removeClass(
        b.icons.open).addClass(b.icons.collapse), d.slideDown(
        b.animationSpeed,
        function () {
          c.removeClass("collapsed-box")
        })) : (a.children(":first").removeClass(b.icons.collapse)
        .addClass(b.icons.open), d.slideUp(b.animationSpeed,
          function () {
            c.addClass("collapsed-box")
          }))
    },
   ᶜ remove: function (a) {
      var b = a.parents(".box").first();
      b.slideUp(this.animationSpeed)
    }
  }
}
if("undefined" == typeof jQuery) throw new Error(
  "AdminLTE requires jQuery");

/*...*/†

 ᵈ function (a) {
    "use strict";
    a.fn.boxRefresh = function (b) {
      function c(a) {
        a.append(f), e.onLoadStart.call(a)
      }

      function d(a) {
        a.find(f).remove(), e.onLoadDone.call(a)
      }
      var e = a.extend({
          trigger: ".refresh-btn",
          source: "",
          onLoadStart: function (a) {
            return a
          },
          onLoadDone: function (a) {
            return a
          }
        }, b),
        f = a(
          '<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
        );
      return this.each(function () {
        if("" === e.source) return void(window.console &&
          window.console.log(
            "Please specify a source first - boxRefresh()")
        );
        var b = a(this),
          f = b.find(e.trigger).first();
        f.on("click", function (a) {
          a.preventDefault(), c(b), b.find(".box-body").load(
            e.source,
            function () {
              d(b)
            })
        })
      })
    }
  }(jQuery),
  function (a) {
    "use strict";
    a.fn.activateBox = function () {
      a.AdminLTE.boxWidget.activate(this)
    }
  }(jQuery)  function (a) {
    "use strict";
    a.fn.boxRefresh = function (b) {
      function c(a) {
        a.append(f), e.onLoadStart.call(a)
      }

      function d(a) {
        a.find(f).remove(), e.onLoadDone.call(a)
      }
      var e = a.extend({
          trigger: ".refresh-btn",
          source: "",
          onLoadStart: function (a) {
            return a
          },
          onLoadDone: function (a) {
            return a
          }
        }, b),
        f = a(
          '<div class="overlay"><div class="fa fa-refresh fa-spin"></div></div>'
        );
      return this.each(function () {
        if("" === e.source) return void(window.console &&
          window.console.log(
            "Please specify a source first - boxRefresh()")
        );
        var b = a(this),
          f = b.find(e.trigger).first();
        f.on("click", function (a) {
          a.preventDefault(), c(b), b.find(".box-body").load(
            e.source,
            function () {
              d(b)
            })
        })
      })
    }
  }(jQuery),
  function (a) {
    "use strict";
    a.fn.activateBox = function () {
      a.AdminLTE.boxWidget.activate(this)
    }
  }(jQuery)

† 跳过此代码

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

ᵇ boxwidgets 折叠并且高度应该相应地调整。

ᶜ boxwidgets 可以被移除,高度应该做相应的调整。

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

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

最后更新

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

【讨论】:

  • 您刚刚将内部社交小部件框中的display: none 删除到display: block,并且由于所有社交小部件块都包含相同的内容,因此它们默认显示为相同的高度。检查我原来的 plnkr 并尝试使其正确对齐
  • @dark_shadow 这是你原来的一个分支。
  • 请参考我有问题的更新。我已经清楚地提到了我遇到的问题。如果不清楚,请告诉我。此外,要复制此问题,您只需将内部社交小部件框 display: block 更改为 display: none
  • @dark_shadow 简而言之,我想用这个主题的现有盒子和社交小部件盒子来完成第 4 点。 你想要社交盒子吗? display: none 是某种状态导致的状态吗?您打算动态添加这些框?
  • 是的,会有动态添加的社交小部件框。这并不意味着你总是会有相同数量的盒子。我告诉你输入display:none,这样你就可以看到当盒子/内容的数量减少/增加时会发生什么,以及它对高度的相应影响。
【解决方案2】:
  1. 新的对齐方式是使用flexbox。这是一个简单的example 来展示它的力量:

HTML:

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

CSS:

.wrapper {
    display: flex;
}

现在.wrapper 中的 div 已排成一行。

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

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

使用 flexbox,您可以简单地对齐项目,将它们垂直居中对齐,水平居中对齐,等等。

【讨论】:

    【解决方案3】:

    您可以使用display: flex,阅读更多:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 附言但是你需要为旧浏览器使用前缀

    【讨论】:

      【解决方案4】:

      您可以使用浮动来水平放置框。我 fork 你的 Plunker 并将 .box 从 display: inline-block; 更改为 float: left;: http://plnkr.co/edit/Woo31pPiHi4HcvXZ9NXE?p=preview

      【讨论】:

      • 当然,浮动很容易破坏,我同意这一点,但内联块对齐也是如此。
      • 如果 OP 不必支持旧版浏览器,他也可以使用 flexbox。
      • @ErikDjupvik:请您看看我的更新并做出相应的回复。
      【解决方案5】:

      在阅读了您的问题并查看了 cmets 后,我看到您使用的主题具有(或您已添加)twitter 引导程序。我不确定你为什么不根据你想要实现的布局来使用它的网格系统。查看您提供的主题链接,我看到此布局包含 4 个水平对齐的小部件,对于您想要实现的目标应该绰绰有余。

      <section class="content">
          <div class="row">
              <div class="col-md-3 col-sm-6 col-xs-12">
                  <!-- Column 1, example widget code below -->
                  <div class="info-box">
                      <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
                      <div class="info-box-content">
                          <span class="info-box-text">Messages</span>
                          <span class="info-box-number">1,410</span>
                      </div>
                  </div>
                  <!-- Next widget underneath would go here -->
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                  <!-- Column 2, add widgets in here -->
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                  <!-- Column 3, add widgets in here -->
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                  <!-- Column 4, add widgets in here -->
              </div>
          </div>
      </section>
      

      如果我误解了这个问题,请告诉我。希望对您有所帮助。

      EDIT #2 - 添加了一些 CSS 和 Fiddle 链接

      根据您的反馈,我将如何处理多个列

      CSS

      .cust-table {
          display: table;
          padding: 0;
          width: 100%;
      }
      .cust-tr {
          display: table-row;
      }
      .cust-td {
          border-collapse: collapse;
          display: table-cell;
          vertical-align: top;
          background: pink;
          border: 1px solid gray;
          min-width: 100px;
      }
      

      HTML

      <div class="cust-table">
          <div class="cust-tr">
              <div class="cust-td">
                  <!-- Column 1, example widget code below -->
                  <div class="info-box">
                      <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
                      <div class="info-box-content">
                          <span class="info-box-text">Messages</span>
                          <span class="info-box-number">1,410</span>
                      </div>
                  </div>
                  <!-- Next widget underneath would go here -->
              </div>
              <div class="cust-td">
                  <p>Its all bang bang bloddy bang to me!</p>
              </div>
              <div class="cust-td">
                  <p>This is another column with text just for fun</p>
              </div>
              <div class="cust-td">
                  <p>This is another column with more excitement then the last column. Dont believe me?</p>
              </div>
          </div>
      </div>
      

      这样,如果您最终有 20 列,它们都会水平显示。根据您希望它们显示的宽度,您可以使用min-width,这样它们就不会被压扁。如果您想尝试一下布局,这里是JS.Fiddle link。

      【讨论】:

      • 使用 twitter bootstrap 的说法部分正确,但问题的初衷是我们将动态水平添加多个列,并且不限于 4 个horizo​​ntol 小部件。此外,所有这些水平柱的高度应该相同。还有其他并发症,请参考我的问题
      • @dark_shadow 好的,很高兴知道。我会再看看你的问题。我知道您不能使用 twitter bootstraps 列,因为您将动态添加列,但保持我在上面发布的结构将保持列高相同,仅供参考。
      • 我知道这样高度会保持不变,但是当你有 20 列都需要水平显示在同一行时,你将如何处理这种情况?
      • 您能否分享一个 plnkr 以获得所提出的解决方案。这样会更好。谢谢
      • 显然这个解决方案不起作用。随着您不断添加列,列的宽度不断减小。我可以看到您已经提到使用 min-width 来解决该问题,但不知何故不能解决问题。您也许可以创建一个 plunker 检查它。谢谢
      猜你喜欢
      • 2013-11-25
      • 2011-04-26
      • 1970-01-01
      • 2017-07-01
      • 2020-10-21
      • 1970-01-01
      • 2012-10-10
      • 2016-09-15
      相关资源
      最近更新 更多