如何保持此内联？甚至垂直对齐：顶部;不管用。正如您在产品图像上看到的那样，未完全对齐或不是内联。我认为问题是产品名称。产品名称应为内联。顺便说一句，我使用同位素jquery，如果我删除同位素脚本，产品就是内联的。我该怎么办？
CSS：
//Container of each products
.product-feature {
text-align: center;
position: relative;
max-width: 100%;
font-family: 'Vitesse-Bold';
vertical-align: top;
}
//Product-Item-Details and Product name(Font Size)
.product-item-details .product-item-name {
font-size: 14px;
margin-bottom: -4px !important;
}
//Class of product name
.product-item-name {
word-wrap: break-word;
margin: 5px 0;
webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
//Product Item name font style, colors, text-transform
//and etc.
.product-item-details .product-item-name a {
font-size: 14px;
font-weight: normal;
font-family: Vitesse-Bold;
color: #333;
text-transform: capitalize;
display: inline-block;
word-break: break-word;
}
//Hover item name
.product-item-details .product-item-name a:hover {
color: #333;
text-decoration: underline !important;
}
//Container of each product image
.product-image-container {
display: inline-block;
max-width: 100%;
}
//Wrapper of Image
.product-image-wrapper {
display: block;
height: 0;
overflow: hidden;
position: relative;
z-index: 1;
}
//Product-image Photo
.product-image-photo {
display: block;
margin: auto;
height: auto;
max-width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
bottom: 0;
}
//styles of brands
.product-item-brand {
font-family: Vitesse-Light;
font-size: 14px;
line-height: 1.42857143;
margin: 0 0px 0px;
}
//min-height of product-brand
.product-item-details .product-item-brand {
min-height: 20px;
}
HTML：
<?php include('admin/admin_server.php');?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Shop | Sneakix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../assets/css/font-awesome.css">
<link rel="icon" href="../assets/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="../assets/style.css">
<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/animate.css" type="text/css" />
<!-- Amaran Notification -->
<link rel="stylesheet" href="../assets/css/amaran.min.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/animate.min.css" type="text/css" />
</head>
<body>
<?php include('header.php');?>
<div id="wrapper" class="clearfix">
<div id="form-shop">
<div class="product-shop-container">
<div class="row">
<div class="col-md-2">
<div class="widget widget-filter-links clearfix">
<h3 class="text-block">BRANDS</h3>
<ul class="custom-filter nobottommargin" data-container="#products" data-active-class="active-filter">
<li class="widget-filter-reset active-filter"><a href="#" data-filter="*">Clear</a></li>
<?php foreach(get_brand_by_gender() as $cat_row): ?>
<li><a href="#" data-filter=".<?=$cat_row['brand_id']?>"><?=$cat_row['brand_name']?></a></li>
<?php endforeach;?>
</ul>
</div>
<br>
<h3 class="text-block">FILTER BY</h3>
<ul id="category-tabs">
<li><a href="javascript:void" class="filter-title"><i class="fa fa-plus dim"></i>Category</a>
<ul class="brands-filter">
<?=get_shop_category()?>
</ul>
</li>
</ul>
<ul id="category-tabs">
<li><a href="javascript:void" class="filter-title"><i class="fa fa-plus dim"></i>Price</a>
<ul class="shop-sorting">
<li class="widget-filter-reset active-filter"><a href="#" data-sort-by="original-order">Clear</a></li>
<li><a href="#" data-sort-by="price_lh">Price: Low to High</a></li>
<li><a href="#" data-sort-by="price_hl">Price: High to Low</a></li>
</ul>
</li>
</ul>
<ul id="category-tabs">
<li><a href="javascript:void" class="filter-title"><i class="fa fa-plus dim"></i>Size</a>
<ul class="brands-filter">
<li>Radio Button Size</li>
</ul>
</li>
</ul>
<br>
</div>
<div class="col-md-10">
<div id="products" data-layout="fitRows">
<?=get_products_by_segment()?>
</div>
<hr class="transparent">
</div>
</div>
</div>
</div>
</div>
<?php include('footer.php');?>
<!--External JavaScripts-->
<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/js/plugins.js"></script>
<!--Bootstrap Scripts-->
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>
<!--Functions JavaScript-->
<script type="text/javascript" src="../assets/js/ajaxFunctions.js"></script>
<script type="text/javascript" src="../assets/js/functions.js"></script>
<script type="text/javascript" src="../assets/js/customize.js"></script>
<!---Amaran Notification -->
<script type="text/javascript" src="../assets/js/jquery.amaran.min.js"></script>
<script type="text/javascript">
show_cart_contents();
show_cart_count();
show_account_contents();
show_search_contents();
get_products_brand();
</script>
<script>
jQuery(document).ready(function($){
$('#products').isotope({
transitionDuration: '0.65s',
getSortData: {
name: '.product-item-name',
price_lh: function( itemElem ) {
if( $(itemElem).find('.price').length > 0 ) {
var price = $(itemElem).find('.price').text();
} else {
var price = $(itemElem).find('.price').text();
}
priceNum = price.split("₱");
return parseFloat( priceNum[1] );
},
price_hl: function( itemElem ) {
if( $(itemElem).find('.price').length > 0 ) {
var price = $(itemElem).find('.price').text();
} else {
var price = $(itemElem).find('.price').text();
}
priceNum = price.split("₱");
return parseFloat( priceNum[1] );
}
},
sortAscending: {
name: true,
price_lh: true,
price_hl: false
}
});
$('.custom-filter:not(.no-count)').children('li:not(.widget-filter-reset)').each( function(){
var element = $(this),
elementFilter = element.children('a').attr('data-filter'),
elementFilterContainer = element.parents('.custom-filter').attr('data-container');
elementFilterCount = Number( jQuery(elementFilterContainer).find( elementFilter ).length );
element.append('<span>'+ elementFilterCount +'</span>');
});
$('.shop-sorting li').click( function() {
$('.shop-sorting').find('li').removeClass( 'active-filter' );
$(this).addClass( 'active-filter' );
var sortByValue = $(this).find('a').attr('data-sort-by');
$('#products').isotope({sortBy: sortByValue});
return false;
});
});
</script>
</body>
</html>
显示产品的功能
//Get Products by Brand
function get_products_by_segment() {
GLOBAL $db_conn;
$id = $_GET['id'];
$search_query= "SELECT p.*, pe.*, pbt.* FROM tblproduct p JOIN (SELECT p.product_id, MIN(pe.product_extension_id) AS product_extension_id FROM tblproduct p LEFT JOIN tblproduct_extension pe ON pe.product_id = p.product_id WHERE p.segment_id='$id' GROUP BY product_id) product_unique LEFT JOIN tblproduct_extension pe ON pe.product_extension_id = product_unique.product_extension_id LEFT JOIN tblbrand pbt ON pbt.brand_name = p.product_brand WHERE p.product_id = product_unique.product_id";
$query = mysqli_query($db_conn, $search_query);
function get_image_by_id($product_id) {
GLOBAL $db_conn;
$search_query = "SELECT * FROM tblproduct_carousel WHERE product_id = $product_id LIMIT 1";
$image_query = mysqli_query($db_conn, $search_query);
return $image_query;
}
while ($row = mysqli_fetch_array($query)) {
?>
<div class="product-feature <?=$row['brand_id']?> clearfix" >
<a href="details.php?view_product=<?=$row['product_id']?>&id=<?=$row['segment_id']?>" class="product-item-photo" tabindex="-1" draggable="false" title="<?=$row['product_name']?>">
<span class="product-image-container" style="width: 307px;">
<span class="product-image-wrapper" style="padding-bottom: 100%;">
<?php foreach (get_image_by_id($row['product_id']) as $row_slides):?>
<img class="product-image-photo" src="../assets/uploads/<?=$row['product_brand']?>/<?=$row_slides['product_images']?>" alt="<?=$row['product_name']?>" style="width=307px; height=307px;" draggable="false">
<?php endforeach;?>
</span>
</span>
</a>
<?php if($row['product_stocks'] == 0) {?>
<span class="outofstock-label">SOLD OUT</span>
<?php } ?>
<div class="product-item-details">
<strong class="product-item-name">
<a href="details.php?view_product=<?=$row['product_id']?>&id=<?=$row['segment_id']?>"><?=$row['product_name']?></a>
</strong>
<p class="product-item-brand"><?=$row['product_brand']?></p>
<div class="product-price-details">
<span class="price">₱<?=number_format($row['product_price'], 2)?></span>
</div>
</div>
</div>
<?php
}
return $row;
}
