問題描述
我正在使用 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>
http://plnkr.co/edit/slpJLIRVGfMSC8JWG1bT?p=preview
但它不工作。任何人都可以幫助我如何完成這個？
P.S .: 我在互聯網上搜索，發現類似的線程，但沒有一個是為我工作。 Horizontally align div without float
我還是 CSS 的初學者，真的很感激，如果我能在這裏得到一些幫助。我在這很長一段時間內打破了我的頭腦。
更新
我認為明確寫出實際問題是有意義的，並逐一解決問題。
-
如果內部社交小工具框已摺疊/展開，則水平框不會在同一行上對齊。如何確保水平盒的高度是固定的，不管內部社交小工具盒高度如何？參考屏幕截圖相同。
-
有一些答案提到使用
display: float:left;，但我的問題是實際確保同一行的所有水平框的變量寬度。
<div class="" style="width:2050px;">
如何確保 width:2050px; 動態增加，因為我將在飛行中添加內箱。 P.S .: 我在使用 angularjs 為 ui 。有沒有獨立於 width:2050px; 的 CSS 技巧，這樣就不會對總寬度的計算產生依賴。
-
如何修復內部社交小工具的高度？內部社交小工具盒溢出了實際的水平方向的容器。我該怎麼解決這個問題？
-
分享我實際想要完成的圖像。 。
總而言之，我想用 this 主題的現有框和社交小工具框完成第 4 點。如果還有其他更好的方法，請分享一下。
如果不清楚，請隨時在評論中提及。我會相應地更新問題。
謝謝
更新 2：
我認為相同的高度列是什麼使這個問題更復雜。我可以做的是在水平框內有一個滾動條，可以有多個社會小工具盒。這樣，我們可以為每個水平線列確定一個固定的高度。
更新 3：
而 zer00ne @提供了一個基於 Flex 的解決方案。我已經閲讀了一些論壇，它不適用於所有瀏覽器。由於我的 web-page 將會是移動友好的，我更傾向於使用一般的 CSS 技術實現我所期望的結果。
在實現我的結果的路徑，我創建了以下版本 http://plnkr.co/edit/awVmJWJo0AdrQvdbXG2y?p=preview 使用這個 SO thread 。以下是截圖：
現在我正面臨着一個出現在內部社交窗口小工具中的文本問題。我需要一些這方面的幫助。
除此之外，如果這個解決方案有所改善，人們可以對這些進行評估嗎？
謝謝
最佳解決思路
>>>>>>>>>>>>>>>>>>><<< ;<<<<<<<<<<<<<<<
如果有人真正感興趣，這裏是 「原始問題」 的真正解決方案。
dark_shadow：
While zer00ne@ has provided one solution which is based on Flex.
問題解決見下面的我的演示，它自己説。我不知道為什麼在沒有明確的解決方案的情況下，starikovs 一直在 upupport 。
我不得不重新創建頁面，因為你放置在標記內的額外的無課<div> 是令人困惑的。顯著的變化是向佈局添加 flexbox 。我使用兩個 flexbox 容器，一個控制兩列.flexRow 和另一個內部的每一列來控制窗口小工具.flexCol 。那些無類別的<div> 被組合成一個<section class="colWrap"我添加了內在的測量，所以你的佈局不會固定在 2050 像素的固定寬度，你仍然需要調整.box 的內在測量，1000px 固定將悲傷未來。當我回來時，這些更改將被註釋。除非這不是你想要的？
到最後更新
>>>>>>>>>>PLUNKER<<<<<<<<<<
編輯
只需在.colWrap 中添加一個固定的高度，建議 100vh 為 150vh
我檢查了兩列的高度，實際上它們都與十進制相同。查看截圖：
OLD
你只需要一切對準，正確嗎？好的，請看這裏：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://jsd.admincdn.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
添加了腳本。它位於關閉</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 之間的差異。
UPDATE
據瞭解，問題是佈局需要與 widgetbox 正確對齊，或者在沒有 widgetbox 的情況下。我不認為在 widgetbox 上使用 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)
†將跳過此代碼
ᵃ開發商意味着這個應用程序不是一個完整的解決方案，但是可以購買一個完整的解決方案。
ᵇ盒子倒塌和高度應相應調整。
ᶜ可以移除盒子，並相應調整高度。
ᵈ功能 boxRefresh()是一種我相信的公共方法。可以在添加或減少我想到的小工具後使用它。
我不是最好的解釋第三方插件，所以任何額外的觀察和/或更正是歡迎。
最後更新
我得到它，所以當任何部分崩潰，他們會滑而不是下來。對於 2 個主列，它們的行為應該如此，如果第一列被實際刪除，則第二列將佔據第一列的位置。
次佳解決思路
HTML：
<div class="wrapper">
<div></div>
<div></div>
<div></div>
</div>
CSS：
.wrapper {
display: flex;
}
現在，您的.wrapper 中的 div 已排列成一行。
-
BTW，您可以使用 Autoprefixer 獲取正確的瀏覽器前綴。
-
所有主流瀏覽器都支持 Flexbox：http://caniuse.com/#search=flexbox(帶前綴)
使用 flexbox，您可以根據需要對齊項目，垂直對齊中心，水平在中心等。
參考文獻
注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。