Question

我在创建响应式卡片时出现问题＆＃34;类似于Bootstrap中的Custom Content Thumbnail但是水平。主要问题是我希望图像是正方形并且是卡的高度的100％。另外，我希望所有卡片的宽度和高度都相同。

到目前为止，这是我的工作：

＆＃13;

SELECT VB.COL    
FROM (SELECT '21,31' AS COL
FROM DUAL
UNION ALL 
SELECT '1' AS COL
FROM DUAL
UNION ALL
SELECT '21,31,1' AS COL
FROM DUAL
UNION ALL
SELECT '156,158' AS COL
FROM DUAL
) VB           
WHERE  REGEXP_LIKE (VB.COL,'^1$');

＆＃13;

body {
	background-color:#ededed;
	font-family:"Segoe UI";
}

/*----------2.Headings & Buttons----------*/
h3 {
	font-size:1.2em;
	font-weight:600;
	text-transform:capitalize;
	margin:0 0 10px 0;
	padding:0;
	color:#555555;
}
.btn-styled {
	background-color:transparent;
	border:#666666 1.9px solid;
	color:#666666;
	font-size:0.85em;
	border-radius:30px;
	padding:5px 13px 4px 13px;
	margin:10px 0 10px 0;
}
.btn-styled:hover, .btn-styled:active  {
	background-color:#ededed;
	border-color:#ededed;
	color:#555555;
}
.btn-styled:focus {
	outline:0 !important;
}
/*----------3.Cards----------*/
.card {
	position: relative;
  	margin:2% 5px 2% 5px;
  	background-color: #fff;
  	transition: box-shadow .25s;
  	border-radius: 2px;
   	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
	padding:0;
	min-width:400px;
	max-width:500px;
}
.card .card-image img {
  display: block;
  border-radius: 2px 2px 0 0;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}
.card .card-content {
  padding: 15px 10px 0 0;
  border-radius: 0 0 2px 2px;
}

.card .card-content p {
  margin:0;
  font-size:1.45rem;
  color: #555555;
}
/*----3.a.Horizontal----*/
.card.horizontal .card-image img {
	height:100px;
	width:100px;
}

.card.horizontal {
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
}
.card.horizontal.small .card-image,
 .card.horizontal.medium .card-image,
  .card.horizontal.large .card-image {
  	height: 100%;
  	max-height: none;
  	overflow: visible;
}
.card.horizontal .card-image img {
  	width:150px;
	height:150px;
	margin-right:20px;
}
.card.horizontal .card-stacked {
  	-webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  	-webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  	position: relative;
}
.card.horizontal .card-stacked .card-content {
  	-webkit-flex-grow: 1;
    -ms-flex-positive: 1;
	flex-grow: 1;
}
.card .card-image {
  position: relative;
}

＆＃13;

另外，我举例说明了这些卡应该如何在网格中显示：

当我尝试创建这些卡时，他们没有响应。在不同的屏幕宽度上，左右边距太大或彼此叠加。

有人可以帮忙开始或者给我一些想法，我应该怎么做？提前谢谢。

Answer 1

使用bootstrap。我已经提供了一个演示链接，只是试验代码并阅读bootstrap的文档以便更好地理解

这是您的Demo Link

Html代码

    <div class="container">

      <div class="col-md-4">

        <div class="card">
          <div class="image pull-left">

          </div>
          <div class="content pull-left">
            <h4>
       Title Goes Here
       </h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            <br>

            <button class="btn btn-default btn-read">
              Read more
            </button>
          </div>
          <div class="clearfix">

          </div>
        </div>
      </div>
    </div>

Css代码

    .card {
      background: #fff;
      display: inline-block;
      border: 1px solid #ddd;
    }

    .image {
      float: left;
      background: #000;
      width: 25%;
      height: 150px
    }

    .content {
      float: left;
      height: 140px;
      width: 73%;
      overflow: hidden;
      padding: 5px;
    }

    .content h4 {
      margin: 5px 0;
    }

使用Bootstrap创建响应式水平内容缩略图

1 个答案: