我为产品包创建了以下代码。我需要中间框有一个红色背景,如果没有图像(用于CMS系统),我使用$('#button1').click(function() {
$('.one').empty();
var toAdd = $('input[name=checkListItem]').val();
$('.one').html(toAdd);
});
,以便我可以垂直对齐图像,但这似乎是一个问题。它也需要半响应,因此基于%的宽度。我如何让中间的图像框有红色背景?
Codepen:http://codepen.io/nickelse/pen/VvwRya?editors=110
HTML:
display: table-cell
CSS:
<div class="category-products cf">
<div class="cp-1">
<div class="image">
<img src="http://lorempixel.com/output/abstract-h-c-260-300-1.jpg" alt="">
</div><!-- .image -->
<div class="title">
This Is A Product Title
</div><!-- .title -->
<div class="price">
£10.99
</div><!-- .price -->
</div><!-- .cp-1 -->
<div class="cp-2">
<div class="image">
</div><!-- .image -->
<div class="title">
This Is A Product Title
</div><!-- .title -->
<div class="price">
£10.99
</div><!-- .price -->
</div><!-- .cp-2 -->
<div class="cp-3">
<div class="image">
<img src="http://lorempixel.com/output/abstract-h-c-260-300-1.jpg" alt="">
</div><!-- .image -->
<div class="title">
This Is A Product Title
</div><!-- .title -->
<div class="price">
£10.99
</div><!-- .price -->
</div><!-- .cp-3 -->
</div><!-- .category-products -->
答案 0 :(得分:1)
使用display: flex
代替display: table-cell
(codepen):
.image {
display: flex;
justify-content: center;
align-items: center;
height: 350px;
border: 1px solid #b9b9b9;
background: #fe0000;
}
答案 1 :(得分:1)
您可以使用line-height并删除显示内容(显示:tabe-cell;为了正常工作,需要显示一个表/表行的父级)
单行上的行高将设置容器的最小高度。
div是块,它将达到100%宽度。
如果为空,则插入一个内联块伪元素以触发行高。
body {
margin: 20px 0;
font-family: sans-serif;
}
.category-products {
width: 1000px;
margin: auto;
}
.cp-1 {
width: 32%;
float: left;
background: #999;
text-align: center;
}
.cp-2 {
width: 32%;
float: left;
background: #666;
text-align: center;
margin-left: 2%;
}
.cp-3 {
width: 32%;
float: left;
background: #333;
text-align: center;
margin-left: 2%;
}
.image:before {
content: '';
display: inline-block;
}
.image {
line-height: 350px;
text-align: center;
border: 1px solid #b9b9b9;
background: #fe0000;
}
.image img {
vertical-align: middle;
}
.title {
font-size: 20px;
line-height: 20px;
padding: 12px 0;
font-weight: bold;
}
.price {
font-size: 18px;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
<div class="category-products cf">
<div class="cp-1">
<div class="image">
<img src="http://lorempixel.com/output/abstract-h-c-260-300-1.jpg" alt="">
</div>
<!-- .image -->
<div class="title">
This Is A Product Title
</div>
<!-- .title -->
<div class="price">
£10.99
</div>
<!-- .price -->
</div>
<!-- .cp-1 -->
<div class="cp-2">
<div class="image">
</div>
<!-- .image -->
<div class="title">
This Is A Product Title
</div>
<!-- .title -->
<div class="price">
£10.99
</div>
<!-- .price -->
</div>
<!-- .cp-2 -->
<div class="cp-3">
<div class="image">
<img src="http://lorempixel.com/output/abstract-h-c-260-300-1.jpg" alt="">
</div>
<!-- .image -->
<div class="title">
This Is A Product Title
</div>
<!-- .title -->
<div class="price">
£10.99
</div>
<!-- .price -->
</div>
<!-- .cp-3 -->
</div>
<!-- .category-products -->