Question

我有以下页面（请参阅下面的代码段）。我想对每个项目进行定位，这样当它是一个完整的网页时，元素就是我们想要的位置，但是只要在窄宽高比（例如手机）上观看，那么项目就需要互相折叠。

我可以使用position: absolute;获得完整的网页。我可以把物品放在我想要的地方。但问题是在移动设备上，这些项目相互重叠。所以我想我需要使用position: relative;。

position: relative;允许项目在狭窄的浏览器上相互折叠。但是，我似乎无法将物品放在我想要的位置。

在下面的示例中，我想按如下方式定位项目：

                                    logo
                                    title
    text                                                    screen-print-one
    google apple web                                        screen-print-two


                                             Terms of Service  some@email.com

＆＃13;

body {
	font-family: "proxima-nova" ,"Helvetica", sans-serif;
}

/* logo */

.wz-logo {
	text-align: center;
	padding: 20px 20px 0px 20px;
}

/* title */

.wz-title {
	font-size: 120%;
	color: #B2D137;
	text-align: center;
	padding: 0 20px 40px 30px;
}

/* text */
.text-description {
	padding-left: 10%;
	padding-bottom: 20px;
	padding-top: 20px;
	width: 500px;
}

/* screen-prints */

.screen-prints {
    position: relative;
	float: right;
	padding-right: 10%;
}

.screen-print1 {
  position: relative;
  top: 100px;
  left: 0;
  z-index: 2;
  
}

.screen-print2 {
  position: relative;
  	top: -430px;
  	left: -120px;
	z-index: 1;
}

/* store */

.store-container {
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 10%;
}

.store-container .apple, .img-container .google, .img-container .web {

	padding: 10px;
	padding-left: 20px;
}

.store-container .google {
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	margin-top: 10px;
}

.store-container .apple {
	padding-top: 8px;
	padding-left: 0px;
	padding-right: 0px;
}

.store-container .web {
	padding-top: 15px;
}

/* footer */

footer .terms, footer .contact {
	display:inline-block;
	padding-bottom: 30px;
	padding-right: 10px;
	padding-left: 10px;
}

footer .contact {
	padding-right: 40px !important;
}

footer a {
	color: white;
	text-decoration: none;
	font-size: 14px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

footer {
	position:absolute;
	bottom:0;
	right: 0;
}

＆＃13;

<body class="background-image">

	<div class="wz-logo">
		logo
	</div>

	<div class="wz-title">
		title
	</div>

	<div class="text-description">
		text
	</div>
  
  	<div class="screen-prints">
		<div class="screen-print1">screen-print-one
		</div>
		<div class="screen-print2">screen-print-two
		</div>
	</div>

	<div class="store-container">
		<div class="google">
			<a href="path to app on play store">google</a>
		</div>

		<div class="apple">
			<a href="path to app on apple store">apple</a>
		</div>

		<div class="web">
			<a href="path to website">web</a>
		</div>
	</div>

	<footer>

		<div class="terms">
			<a href="terms.html">Terms of Service</a>
		</div>

		<div class="contact">
			<a href="mailto:some@email.com" target="_top">some@email.com</a>
		</div>

	</footer>

</body>

＆＃13;

如果有人可以协助我如何定位物品，我将不胜感激。（正如您所看到的，我的主要问题是尝试定位screen-print-one＆amp; screen-print-two）。

由于

Answer 1

嗯，你的html逻辑有很多问题。太多的div并没有逻辑包裹。但我用它做了我能做到的事情

见下文。或jsFiddle

＆＃13;

.wz-logo,.wz-title {
	width:100%;
	float:left;
	text-align:center;
}

.left_text {
	float:left;width:50%;
}
.left_text .store-container  div{
	display:inline
}
.screen-prints {
	float:right;
	width:50%;
	text-align:right;
}
footer {
	float:left;
	width:100%;
	text-align:right
}
footer div {
	display:inline
}
@media only screen and (max-width: 460px) {

	
	.left_text,.screen-prints,footer {
		width:100%;
		text-align:center;
	}

}

＆＃13;

<body class="background-image">

	<div class="wz-logo">
		logo
	</div>

	<div class="wz-title">
		title
	</div>
<div class="left_text">


	<div class="text-description">
		text
	</div>
		<div class="store-container">
		<div class="google">
			<a href="path to app on play store">google</a>
		</div>

		<div class="apple">
			<a href="path to app on apple store">apple</a>
		</div>

		<div class="web">
			<a href="path to website">web</a>
		</div>
	</div>
 </div> 
  	<div class="screen-prints">
		<div class="screen-print1">screen-print-one
		</div>
		<div class="screen-print2">screen-print-two
		</div>
	</div>



	<footer>

		<div class="terms">
			<a href="terms.html">Terms of Service</a>
		</div>

		<div class="contact">
			<a href="mailto:some@email.com" target="_top">some@email.com</a>
		</div>

	</footer>

</body>

＆＃13;

我建议您使用bootstrap进行响应。它更容易使用

CSS位置相对于绝对值

1 个答案: