Question

当我放大html页面时，我的div2标签归结为另一个div1元素但我想让它向右移动......放大。低于我的htl和css代码。而且我在pixcels或％

中的距离很困惑

** html代码**

＆＃13;

<body>
<div class="header">
</div>
<div class="wrapper">
<div class="welcometheworld">
<p>Welcome</p>
<p>to</p>
<p>the</p>
<p>new</p>
<p>world.</p>
<p><b>Feel</b></p>
<p><b>The Change.</b></p>
</div>
<div class="Signup" >
<form class="commonForm" >
<fieldset>
<h1>Sign up</h1>
<p><input type="text" name="fname" placeholder="First name" size="25" />
 
<input type="text" name="lname" placeholder="Last name" size="25" /></p>
<p><input type="email" name="email" placeholder="Email" size="61" /></p>
<p><input type="password" name="password1" placeholder="Password" size="61" /></p>
<p><input type="password" name="password2" placeholder="Re-enter Password" size="61" /></p>
<p class="bday"><b>Birthday</b></p>
<p><select name="Month" class="bdaymonth">
<option value="" style="display:none">Month</option>
<option value="January">January</option>
<option value="Feburary">Feburary</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
 
<input type="day" name="day" placeholder="Date" maxlength="2"/>
 
<input type="year" name="year" placeholder="Year" maxlength="4" /></p>
<p><input type="submit"  value="Sign up" /></p>
</fieldset>
</form>
</div>
<div class="footer">
</div>
</div>
</body>

＆＃13;

html,body{
 margin:0;
 background:#2c3e50;
}
.wrapper{
 position:relative;
 margin: 0 auto;
 width: 100%; 
}
.header{ 
 min-width: 980px; 
 height:40px;
 background:#8e44ad;
 box-shadow:0 1px 1px 0 #000;
}
.welcometheworld {
 position:relative;
 float:left;
 margin-left:25%;
 height:50%;
 border:0;
 }
.welcometheworld p{
 position:relative;
 text-align:center;
 font-size:100px;
 color:black;
 margin:auto;
}
.Signup{
 position:relative;
 left:15%;
 float:left;
 margin-left:15%;
 margin-top:15px;
 margin-bottom:200px;
 background: #ffffff;
 height:800px;
 width:500px;
 border-radius:15px;
 border:0;
 box-shadow:0 0 11px 11px #432677;
}
.commonForm fieldset{
border:0;
}
.commonForm h1{
 position:relative;
 left:2%;
 text-align:center;
 font-size:50px;
 font-weight:bolder;
 color:#8e44ad;
}
.commonForm  p input[type=text]{
 position:relative;
 left:2%;
 padding:8px;
 width:200px;
 border:solid 2px #c4c7cb;
 border-radius:3px;
 float:none;
}
.commonForm  p input[type=email]{
 position:relative;
 left:2%;
 padding:8px;
 width:434px;
 border:solid 2px #c4c7cb;
 border-radius:3px;
 float:none;
}
.commonForm  p input[type=password]{
 position:relative;
 left:2%;
 padding:8px;
 width:434px;
 border:solid 2px #c4c7cb;
 border-radius:3px;
 float:none;
}
.bday{
  position:relative;
  left:2%;
}
.bdaymonth{
 position:relative;
 padding:8px;
 margin-left:12px;
 border-radius:2px;
 background:#c4cacd;
}
.bdaymonth p option{
 margin: 30px 30px 30px 30px;
 padding: 30px 330px 30px 30px;
 font-size: 90px;
}
.commonForm  p input[type=day]{
 position:relative;
 margin:auto;
 padding:8px;
 width:40px;
 border:solid 2px #c4c7cb;
 border-radius:3px;
 }
.commonForm  p input[type=year]{
 position:relative;
 margin-top:auto;
 padding:8px;
 width:60px;
 border:solid 2px #c4c7cb;
 border-radius:3px;
 
}
.commonForm  p input[type=submit]{
 position:relative;
 left:50%;
 margin-left:-50px;
 background:#2c3e50;
 padding: 10px 20px;
 width:100px;
 border: none;
 color:#8e44ad;
 font-size: .9em;
 font-weight: 700;
 cursor: pointer;
 border-radius:5px;
 float:none;
}

＆＃13;

Answer 1

change this css code in your style sheet then check it. it's working on your requirement or not ?
if any problem then tell me.

.welcometheworld {
    border: 0 none;
    float: left;
    height: 50%;
    position: relative;
    width: 58%;
}
.Signup {
    background: none repeat scroll 0 0 #ffffff;
    border: 0 none;
    border-radius: 15px;
    box-shadow: 0 0 11px 11px #432677;
    float: left;
    height: 800px;
    margin-bottom: 200px;
    margin-top: 30px;
    position: relative;
    right: 0;
    width: 500px;
}

Html：放大div向下移动

1 个答案: