【发布时间】: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 的初学者,如果我能在这里得到一些帮助,我将不胜感激。很长一段时间我都在为此头疼。
更新
我认为将实际问题清楚地写出来并尝试一一解决是有意义的。
- 如果内部社交小部件框折叠/展开,水平框不会在同一行上对齐。无论内部社交小部件框的高度如何,如何确保水平框的高度是固定的?请参阅屏幕截图。
- 有一些答案提到了
display: float:left;的使用,但我的问题是可变宽度实际上确保了同一行上的所有水平框。
<div class="" style="width:2050px;">
我如何确保width:2050px; 动态增加,因为我将动态添加内盒。 P.S.:我正在为 ui 使用 angularjs。是否有任何独立于 width:2050px; 的 CSS 技巧这样就不会依赖于总宽度计算。
简而言之,我想用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