Question

首先我有点困惑，但我会尽力解释我的问题和我想要的东西。

我有一个div而且在div里面我有另一个div，我希望div能够向左和向右移动，仅此而已，它必须在调整大小时遵循与图像相同的路径（参见我的项目）。

如何使白色圆圈后面的div始终与圆圈相同？

body {
  margin: 0;
  width:100%;
}

body > div {
  height: 200px;
}



.header {	
  background-color: transperent;
  height: 100px;
  color: white;
}

.product {
	
  margin-top:0px;
  height: 600px;
   background-color: blue;
  color: white;
  float:left;
  width:50%;
  margin:0;
  padding:0;
  display: inline-block;
}

.product2 {
  height: 600px;
  margin-top:0px;
  background-color: red;
  color: white;
  width:50%;
  float:left; 
  margin:0;
  padding:0;
  position: relative;
  display: inline-block;
}

.product2 img{
  position: absolute;
  right: 0;
  bottom: 0;
}

.main{
	background-image: url("http://i.imgur.com/Y5hHusa.png");
	height:650px;
}

#crew {
  height:50px;
  clear:both;
  background-color: tomato;
  color: darkgrey;
}

.stick {
    position: fixed;
    top: 0;
}

.tour {
  background-color: black;
  color: darkgrey;
}

.pricing {
  background-color: gold;
  color: black;
}

.contact {
  background-color: black;
  color: white;
}

.menu {
    float: right;
    font-size: 18px;
    list-style: outside none none;
    margin-top: -5px;
	margin-right: 50px;
}

.menu li a {
    color: blue;
    display: block;
    text-decoration: none;
}

.menu li {
    display: inline;
    float: left;
    padding-right: 23px;
}
 
.menu li a:hover{
	background-color:none;
	color:red;
}

.div_form {

height:35%;
width:40%;
margin-top:36%;
margin-left:41%;
background-color:blue;
}

.product2 .div_form{

}

.product2 .div_form .form_title{
position:absolute;
z-index:1;
margin-top:270px;
margin-left:1em;
font-size:3em
}

.product2 .div_form .form_circulo{

z-index:1
}

.product2 .div_form .div_email .input_first_email{
margin-top: -70%;
margin-left:50%;
height:3em;
border-radius:5px;
padding:1em;
width:45%;	
}

.product2 .div_form .divbtnsubmit{
background-color:red;
margin-left:60%;
width:20em;
height:3em;
border-radius:1em;
text-align:center;
margin-top:1em;
width:45%
}

.product2 .div_form .divbtnsubmit .btnsumnitform
{
font-size:2em;
color:white;
position:absolute;
padding:.3em;
margin-left:-3.5em
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="styles.css" rel="stylesheet" type="text/css" >
  <title> Layout </title>
</head>
<body>

<div class="main">
<div class="header">
  <img src="http://i.imgur.com/48nYArD.png">
  
  <ul class="menu">
	<li><a href="#">Home &nbsp;&nbsp;&nbsp;</a> </li>
    <li><a href="#">Product Tour&nbsp;&nbsp;&nbsp;</a> </li>
    <li><a href="#">Pricing&nbsp;&nbsp;&nbsp;</a> </li>
    <li><a href="#">Try&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
    <li><a href="#">Vision</a></li>            
   </ul>
</div>

  <div class="product">
  </div>
  <div class="product2">
       			<img src="http://i.imgur.com/3UTs03w.png">
		<div class="div_form">
					
					</div>       	
		</div>                   
		</div>
  	</div>
    
  <div id="crew">
  </div>
  <div class="tour">
  </div>
  <div class="pricing">
  </div>
  <div class="contact">
</body>
</html>

PS：对不起辩论，我的英语不是最好的，希望你能理解。问候，杜阿尔特安德拉德。

Answer 1

问题是，您是通过给div_form margin-top 36%来垂直定位% div。但是值product2的边距始终相对于容器的宽度，而不是高度。请参阅W3C。

最简单的解决方案是，因为您知道容器的高度（body { margin: 0; } .product { height: 600px; background-color: blue; color: white; float: left; width: 50%; margin: 0; padding: 0; display: inline-block; } .product2 { height: 600px; background-color: red; color: white; width: 50%; float: left; margin: 0; padding: 0; position: relative; display: inline-block; } .product2 img { position: absolute; right: 0; bottom: 0; } .div_form { height: 35%; width: 40%; margin-top: 216px; /* This is what I changed */ margin-left: 41%; background-color: blue; }）是600px，所以将边距设置为600px的36％或216px。

＆＃13;

<div class="main">
  <div class="header">

    <div class="product">
    </div>
    <div class="product2">
      <img src="http://i.imgur.com/3UTs03w.png">
      <div class="div_form">

      </div>
    </div>
  </div>
</div>

＆＃13;

position:absolute

＆＃13;

或者，如果您确实需要父级高度的百分比，则会删除边距并以与img相同的方式提供div left:41%; top:36%;。然后您可以使用frm2=new Form2() frm2.Show()，但您还需要尝试使用z-index，以便再次使其堆叠顺序正确。

使Div及其内容仅在宽度上响应？

1 个答案: