我对css中的格式化相当新。我似乎无法找到与我的布局类似的另一个问题。 这就是我想要的样子： layout design
目前这就是我所拥有的：
.RegisterBackground{
background-color:rgb(255,255,255);
float : none;
clear : both;
height : 400px;
width : 1000px;
margin-left:50px;
margin-top:50px;
margin-bottom:50px;
/* Makes div scrollable */
overflow-y: auto;
}
.blended_grid{
display : block;
width : 1100px;
overflow : auto;
margin : 0 auto;
}
*
{
border: 0;
margin: 0;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #666666;
background:#3F3079;
line-height: 16px;
}<div class="blended_grid">
<div class="RegisterBackground">
<form action="" style="padding-left:10px; padding-top:10px;">
<label>Full Name: </label>
<input type="text" placeholder="Full Name" required style="border: 1px solid black;">
<br/><br/>
<label>Phone Number:</label>
<input type="number" placeholder="Phone Number" required style="border: 1px solid black;">
<br/><br/>
<label>Gender: </label>
<select name="cars "style="border: 1px solid black;">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<br/><br/>
<label>Birthday: </label>
<input type="date" style="border: 1px solid black;">
<br/><br/>
<label>Type of Work: </label>
<select name="cars "style="border: 1px solid black;">
<option value="Fulltime">Full time</option>
<option value="Parttime">Part time</option>
<option value="Casual">Casual</option>
</select>
<br/><br/>
<label>Starting Date: </label>
<input type="date" required style="border: 1px solid black;">
<br/><br/>
<label>Annual leave left: </label>
<input type="number" placeholder="Current Annual Leave days left" required style="border: 1px solid black;">
<br/><br/>
<div style="padding-right:500px; float:right">
<label>Login Details: </label>
<input type="text" placeholder="Username" required style="border: 1px solid black;" >
<br/><br/>
</div>
<div style="padding-right:500px; float:right">
<input type="text" placeholder="Password" required style="border: 1px solid black;" >
<br/><br/>
</div>
<div style="padding-right:500px; float:right">
<input type="text" placeholder="Confirm Password" required style="border: 1px solid black;" >
<br/><br/>
</div>
<div style="padding-right:500px; float:right">
<input type="text" placeholder="Confirm Password" required style="border: 1px solid black;" >
<br/><br/>
</div>
<label>Sick leave left: </label>
<input type="number" placeholder="Current Sick Leave days left" required style="border: 1px solid black;">
<br/><br/>
<label>Staff ID number: </label>
<input type="number" placeholder="Staff ID number" required style="border: 1px solid black;">
<br/><br/>
<label style="font-size:11px">Work days a week: </label>
<input type="number" placeholder="No. days work a week" required style="border: 1px solid black;">
<br/><br/>
</form>
</div>
</div>
答案 0 :(得分：0)
我为你做了前几个领域的例子。
为每列创建一个div：wrap1，wrap2，wrap3。
在每个内部中，创建一个div列，每个div包含两个其他div：
wrap1
col1
- leftside
- rightside
col1
- leftside
- rightside
浮动：离开leftside和rightside div。浮点数的高度为零，因此要解决这个问题，您必须将其父div设置为overflow:auto或overflow:hidden
对其他两列使用相同的技术。
div{position:relative;box-sizing:border-box;} /* pos:rel Req for bottom:0 to work */
.overall_wrap{overflow:hidden;border:1px solid purple;}
.overall_wrap div[class^=col]{margin:5px 0;}
.wrap1{float:left;width:30%;bottom:0;border:1px solid green;}
.col1{width:100%;overflow:hidden;}
.leftside{float:left;width:47%;padding-right:2%;text-align:right;}
.rightside{float:left;width:49%;}
.wrap2{float:left;width:20%;bottom:0;text-align:center;overflow:visible;border:1px solid red;}
.col2{width:100%;overflow:hidden;}
.wrap3{float:left;width:40%;top:0;border:1px solid blue;}
.col3{width:100%;overflow:hidden;}
.leftside{float:left;width:47%;padding-right:2%;text-align:right;}
.rightside{float:left;width:49%;}
.col3_lowerright{border:1px solid darkcyan;}
.col3_lr-top{width:100%;height:20px;}
.col3_lr-bot{width:100%;padding:20px;text-align:center;}
#btnReg{padding:10px;border:1px solid orange;border-radius:5px;}
.RegisterBackground{
background-color:rgb(255,255,255);
float : none;
clear : both;
height : 400px;
width : 1000px;
margin-left:50px;
margin-top:50px;
margin-bottom:50px;
/* Makes div scrollable */
overflow-y: auto;
}
.blended_grid{
display : block;
width : 1100px;
overflow : auto;
margin : 0 auto;
}
*
{
border: 0;
margin: 0;
}
body{
font: 12px Arial, Helvetica, sans-serif;
color: #666666;
background:#3F3079;
line-height: 16px;
}<div class="blended_grid">
<div class="RegisterBackground">
<form action="" style="padding-left:10px; padding-top:10px;">
<div class="overall_wrap">
<div class="wrap1">
<div class="col1">
<div class="leftside">
<label>Full Name: </label>
</div>
<div class="rightside">
<input type="text" placeholder="Full Name" required style="border: 1px solid black;">
</div>
</div><!-- .col1 -->
<div class="col1">
<div class="leftside">
<label>Phone Number:</label>
</div>
<div class="rightside">
<input type="number" placeholder="Phone Number" required style="border: 1px solid black;">
</div>
</div><!-- .col1 -->
<div class="col1">
<div class="leftside">
<label>Gender: </label>
</div>
<div class="rightside">
<select name="cars "style="border: 1px solid black;">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div><!-- .col1 -->
<div class="col1">
<div class="leftside">
<label>Birthday: </label>
</div>
<div class="rightside">
<input type="date" style="border: 1px solid black;">
</div>
</div><!-- .col1 -->
<div class="col1">
<div class="leftside">
<label>Type of Work: </label>
</div>
<div class="rightside">
<select name="cars "style="border: 1px solid black;">
<option value="Fulltime">Full time</option>
<option value="Parttime">Part time</option>
<option value="Casual">Casual</option>
</select>
</div>
</div><!-- .col1 -->
<div class="col1">
<div class="leftside">
<label>Starting Date: </label>
</div>
<div class="rightside">
<input type="date" required style="border: 1px solid black;">
</div>
</div><!-- .col1 -->
<div class="col1">
<div class="leftside">
<label>Annual leave left: </label>
</div>
<div class="rightside">
<input type="number" placeholder="Current Annual Leave days left" required style="border: 1px solid black;">
</div>
</div><!-- .col1 -->
<div class="col1">
<div class="leftside">
<label>Sick leave left: </label>
</div>
<div class="rightside">
<input type="number" placeholder="Current Sick Leave days left" required style="border: 1px solid black;">
</div>
</div><!-- .col1 -->
<div class="col1">
<div class="leftside">
<label>Staff ID number: </label>
</div>
<div class="rightside">
<input type="number" placeholder="Staff ID number" required style="border: 1px solid black;">
</div>
</div><!-- .col1 -->
<div class="col1">
<div class="leftside">
<label style="font-size:11px">Work days a week: </label>
</div>
<div class="rightside">
<input type="number" placeholder="No. days work a week" required style="border: 1px solid black;">
</div>
</div><!-- .col1 -->
</div><!-- .wrap1 -->
<div class="wrap2">
<div class="col2">
<label>Login Details: </label>
<input type="text" placeholder="Username" required style="border: 1px solid black;" >
</div>
<div class="col2">
<input type="text" placeholder="Password" required style="border: 1px solid black;" >
</div>
<div class="col2">
<input type="text" placeholder="Confirm Password" required style="border: 1px solid black;" >
</div>
<div class="col2">
<input type="text" placeholder="Confirm Password" required style="border: 1px solid black;" >
</div>
</div><!-- .wrap2 -->
<div class="wrap3">
<div class="col3">
<div class="leftside">
<p> </p>
<label style="font-size:11px">Full Name: </label>
</div>
<div class="rightside">
Emergency Contact 1
<input type="number" placeholder="Full Name" required style="border: 1px solid black;">
</div>
</div><!-- .col3 -->
<div class="col3">
<div class="leftside">
<label style="font-size:11px">Phone Number: </label>
</div>
<div class="rightside">
<input type="number" placeholder="Phone Number" required style="border: 1px solid black;">
</div>
</div><!-- .col3 -->
<p> </p>
<div class="col3">
<div class="leftside">
<p> </p>
<label style="font-size:11px">Full Name: </label>
</div>
<div class="rightside">
Emergency Contact 2
<input type="number" placeholder="Full Name" required style="border: 1px solid black;">
</div>
</div><!-- .col3 -->
<div class="col3">
<div class="leftside">
<label style="font-size:11px">Phone Number: </label>
</div>
<div class="rightside">
<input type="number" placeholder="Phone Number" required style="border: 1px solid black;">
</div>
</div><!-- .col3 -->
<div class="col3_lowerright">
<div class="col3_lr-top"></div>
<div class="col3_lr-bot">
<button id="btnReg">Register</button>
</div>
</div><!-- .col3_lowerright -->
</div><!-- .wrap3 -->
</div><!-- .overall_wrap -->
</form>
</div><!-- .RegisterBackground -->
</div><!-- .blended_grid -->
更新以执行更多操作。因为我没时间，你必须自己解决col2棒。以下是它的工作原理：
position:static是默认设置，但不允许上/下/左/右（例如top:15px）
position:relative允许上/下/左/右
使用position:relative;bottom:0;对齐父div底部的div
我不确定float:left如何干扰/与bottom:0
您可能还需要探索flexbox模型，该模型非常有用并且最终可以使用。
http://www.webdesignermag.co.uk/responsive-layouts-with-flexbox/
答案 1 :(得分：0)
我使用display: table，display: table-row和display: table-cell在下面创建了一个工作示例。这些工作大多像HTML标签。这种方法存在响应问题，可以通过使用媒体查询来解决。
* { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; }
body {
display: inline-block;
min-width: 100%;
background: #3F3079;
font: 12px Arial, Helvetica, sans-serif;
color: #666666;
}
/* ************** Components ************** */
.blended-grid {
margin: 0px auto;
padding: 50px;
}
.register-background {
background-color: rgb(255, 255, 255);
padding: 10px;
}
.form { display: table; }
.form-section { display: table-cell; }
.form-section-bottom { vertical-align: bottom; }
.form-section + .form-section { padding-left: 20px; }
.form-section-with-footer {
position: relative; /* Help position: absolute below */
padding-bottom: 50px; /* should at least be equal to footer height */
}
.form-section-footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
text-align: right;
}
.form-group-header { font-size: 1.25em; }
.form-group { display: table; }
.form-control-wrapper { display: table-row; }
.form-control-wrapper + .form-control-wrapper > * { margin-top: 10px; }
.form-control-label {
display: table-cell;
white-space: nowrap;
text-align: right;
padding-right: 15px;
}
.form-control {
display: table-cell;
min-width: 100%;
border: 1px solid black;
}<div class="blended-grid">
<div class="register-background">
<form class="" action="">
<div class="form-section">
<div class="form-group">
<div class="form-control-wrapper">
<label class="form-control-label">Full Name: </label>
<input class="form-control" type="text" placeholder="Full Name" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Phone Number:</label>
<input class="form-control" type="number" placeholder="Phone Number" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Gender: </label>
<select class="form-control" name="cars">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Birthday: </label>
<input class="form-control" type="date">
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Type of Work: </label>
<select class="form-control" name="cars">
<option value="Fulltime">Full time</option>
<option value="Parttime">Part time</option>
<option value="Casual">Casual</option>
</select>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Starting Date: </label>
<input class="form-control" type="date" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Annual leave left: </label>
<input class="form-control" type="number" placeholder="Current Annual Leave days left" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Sick leave left: </label>
<input class="form-control" type="number" placeholder="Current Sick Leave days left" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Staff ID number: </label>
<input class="form-control" type="number" placeholder="Staff ID number" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Work days a week: </label>
<input class="form-control" type="number" placeholder="No. days work a week" required>
</div>
</div>
</div>
<div class="form-section form-section-bottom">
<h2 class="form-group-header">Login Details</h2>
<div class="form-group">
<div class="form-control-wrapper">
<input class="form-control" type="text" placeholder="Username" required>
</div>
<div class="form-control-wrapper">
<input class="form-control" type="text" placeholder="Password" required>
</div>
<div class="form-control-wrapper">
<input class="form-control" type="text" placeholder="Confirm Password" required>
</div>
<div class="form-control-wrapper">
<input class="form-control" type="text" placeholder="Confirm Password" required>
</div>
</div>
</div>
<div class="form-section form-section-with-footer">
<h2 class="form-group-header">Emergency Contact 1</h2>
<div class="form-group">
<div class="form-control-wrapper">
<label class="form-control-label">Full Name: </label>
<input class="form-control" type="number" placeholder="Full Name" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Phone Number: </label>
<input class="form-control" type="number" placeholder="Phone Number" required>
</div>
</div>
<h2 class="form-group-header">Emergency Contact 2</h2>
<div class="form-group">
<div class="form-control-wrapper">
<label class="form-control-label">Full Name: </label>
<input class="form-control" type="number" placeholder="Full Name" required>
</div>
<div class="form-control-wrapper">
<label class="form-control-label">Phone Number: </label>
<input class="form-control" type="number" placeholder="Phone Number" required>
</div>
</div>
<div class="form-section-footer">
<button>Register</button>
</div>
</div>
</form>
</div>
</div>
其他更改包括删除所有背靠背<br>标记和任何内联样式标记。这些是代码气味。删除这些后，我们可以专注于将样式保留在CSS中。