Question

我需要连续显示项目数。每个项目都有两个需要位于项目顶部中间的文本，一个位于项目中间的图像和另一个位于项目右下角的图像。必须修复所有项目的高度，并且图像不应以任何屏幕大小溢出边框。

我有以下代码，主要问题是我无法将第二张图片保留在各自项目的右下角。

DEMO

         .items { */
	position: relative;
	margin-bottom: 7px;
	margin-left: 7px;
	margin-right: 0px;
	text-align: left;
	background-color: #ffeecc;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	padding-left: 1%;
	height:260px;

}



.col-md-12.col-xs-12.btn>a>img {
	float: right;
	width: 100px;
	height: 50px;
}

.col-md-12.col-xs-12.my-col {
	padding-left: 100%;
}

.my-row {
	bottom: 0;
	padding-right: 0;
	position: absolute;
}

.my-row {
	bottom: 0;
	padding-right: 0;
	position: absolute;
}

.btn {
	float: right;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">


  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">

</head>


<body>

<div class="container-fluid">
			<div class="row">
					<div class="col-md-3 items">
						<div class="row">
							<div class="col-md-12 text-center">
								<h4>T1</h4>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 text-center">
								<h5>T2</h5>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 row text-center">
								<a
									href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
									title="T1" data-gallery rel="nofollow"> <img
									id="imageresource"
									src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
									class="img-thumbnail" width="30%" style="margin-left: 30px;" />
								</a>

							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-xs-12 my-col">
								<div>
									<a href="#" target="_blank"><img src="#" class="btn" /></a>
								</div>
							</div>
						</div>
					</div>



					<div class="col-md-3 items">
						<div class="row">
							<div class="col-md-12 text-center">
								<h4>T1</h4>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 text-center">
								<h5>T2</h5>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 row text-center">
								<a
									href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
									title="T1" data-gallery rel="nofollow"> <img
									id="imageresource"
									src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
									class="img-thumbnail" width="25%" style="margin-left: 30px;" />
								</a>

							</div>
						</div>
						<div class="row">
							<div class="col-md-12 col-xs-12 my-col">
								<div>
									<a href="#" target="_blank"><img src="#" class="btn" /></a>
								</div>
							</div>
						</div>
					</div>


			</div>
		</div>

	</div>
</body>


</html>

Answer 1

将此样式添加到图像

position:absolute;
bottom:0;
right:0;

Answer 2

我可以通过将图像部分更改为以下并添加到css下面来解决问题

RewriteCond %{REQUEST_URI} ^/app/.*$
RewriteRule ^(.*)$ $1 [L]

Answer 3

父元素应为position: relative 位于右下角的元素应为

position: absolute;
right:0;
bottom:0;

需要将图像保留在div的右下角

DEMO

3 个答案: