高度相同的流体箱
我在为bootstrap 3创建相同高度的盒子时遇到了问题。在开始时，我遇到了图像大小不同的问题，因此我尝试通过JS进行黑客攻击并在运行时调整它们的大小。问题是，如果图像没有缓存，JS就会失败，并且会进一步搞砸布局。我最终将所有图像的大小调整为700 x 700像素，但问题仍然存在，因为随附的文本可能有不同的长度。
我在小提琴中创建了一个例子：https://jsfiddle.net/7yqkgm2c/
我对CSS不好，我想知道你是否能够帮我解决问题。
这是我用来使所有盒子高度相同的JS（从小提琴中移除）
$(document).ready(function () {
//function that calculates height and makes all boxes same height. Issue- imeges that are not cached, screwing up the layout
var heights = $(".thumbnail").map(function () {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".thumbnail").height(maxHeight + 15);
//end same height products
});
这是我想要实现的结果（如果您认为自己知道如何更好地解决问题，请提出您的解决方案）：
2 个答案:
答案 0 :(得分：1)
这是我的小提琴：https://jsfiddle.net/vhkmyaf3/18/
假设您控制了标记，我清理了每个产品的外观：
<div class='product-container col-xs-12 col-sm-6 col-md-3'>
<div class='item'>
<img src='http://placehold.it/700x700' />
<div class='item-text'>
<h5>Product Title</h5>
<p>Product description. Lorem ipsum dolor sit amet.</p>
</div><!-- end of item-text -->
<div class='price-point'>
<div class='price'>$100</div>
<a class='btn btn-info' href='#'>View</a>
</div><!-- end of price-point -->
</div><!-- end of item -->
</div><!-- end of product-container -->
product-container div对每个产品使用一次，所有产品容器div都显示在名为items-row的div中。如果你想要一个新的产品系列，你会重复items-row div，但由于你使用的是bootstrap，因此产品应该堆叠，这不是必需的。
我只包含了结构所需的基本CSS，以及一些填充/边框等，以便澄清。实现所需均衡高度的关键CSS是使用display:flex：
.items-row, .product-container {
display: webkit-box;
display: moz-box;
display: ms-flexbox;
display: webkit-flex;
display: flex;
}
如示例所示，您需要取消display:flex并替换为display:block，以替换您希望产品在单列中堆叠的任何设备。上面链接的小提琴应该证明您的图像尺寸和产品描述可以非常灵活，同时仍保持均衡的高度。
答案 1 :(得分：0)
您可以为产品说明或标题指定最小高度属性。无论它们包含多少文字，高度总是匹配。
我创建了一个名为“product-description”的类，并给它一个95像素的最小高度。这仅影响标题下方的文本，但如果需要，您可以对产品名称执行相同的操作。
然后，您可以使用媒体查询来定位不同的尺寸，并相应地调整这些值。
HTML：
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="categories-list" class="row list-group">
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME VERY LONG LONG LONG LONG LONG LONG</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345grhj 4567u456uy4567g</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here Text goes here Text goes here Text goes here Text goes here Text goes here </p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$19.95</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="productlist">
<div class="item col-md-2">
<div class="thumbnail">
<img class="group list-group-image thumb1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=700%C3%97700&w=700&h=700" alt="" />
<div class="caption">
<span><h5 class="group inner list-group-item-heading" alt="">PRODUCT NAME</h5></span>
<div class="rating" id="id' . $Value["id"] . '" data-val="' . $Value["average_rating"] . '" data-input=".rating-value" ></div>
<p class="group inner list-group-item-text ">Model: 12345</p>
<p class="group inner product-description">Text goes here</p>
<div class="row bottom_align">
<div class="col-xs-12 col-md-6">
<p class="lead">$1</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-info" href="#">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS：
body {
padding-top: 70px;
font-size: 12px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
html * {
outline: 0 !important;
}
.ui-pnotify {
padding-top: 70px;
}
/* make sidebar nav vertical */
@media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
}
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
.glyphicon { margin-right:5px; }
.thumbnail
{
margin-bottom: 20px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.item.list-group-item
{
float: none;
width: 100%;
background-color: #fff;
margin-bottom: 10px;
}
.item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover
{
background: #428bca;
}
.item.list-group-item .list-group-image
{
margin-right: 10px;
}
.item.list-group-item .thumbnail
{
margin-bottom: 0px;
}
.item.list-group-item .caption
{
padding: 9px 9px 0px 9px;
}
.item.list-group-item:nth-of-type(odd)
{
background: #eeeeee;
}
.item.list-group-item:before, .item.list-group-item:after
{
display: table;
content: " ";
}
.item.list-group-item img
{
float: left;
}
.item.list-group-item:after
{
clear: both;
}
.list-group-item-text
{
margin: 0 0 10px;
}
/* PANEL COLLAPSE */
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
/* PANEL COLLAPSE */
.filters {
max-height:165px;
overflow-y:auto;
}
.bottom_align{
position: absolute;
margin-top: 3px;
margin-bottom: 10;
bottom: 10px;
}
.thumb1 {
width: 250px;
height: 250px;
}
.product-description {
min-height: 95px;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？