将相邻的 div 拉直的最佳方法是什么?我已经尝试过了,但这一切似乎有点比例,我想要一种方法来保持每列彼此相邻(尽管可能发生任何变化)。
这是我的代码:http: //jsfiddle.net/j3cY5/2/
更新:似乎 jQuery datepicker 在示例中不起作用:-(
HTML
<div class="schedule_wrapper">
<div class="schedule_item">
<div style="background-color:#08011c; color: #FFF; padding: 5px;">Task</div>
<div style="height: 20px; padding-top: 4px;">Item 1</div>
<br>
<div style="height: 20px; padding-top: 4px;">Item 2</div>
<br>
<div style="height: 20px; padding-top: 4px;">Item 3</div>
<br>
<div style="height: 20px; padding-top: 4px;">Item 4</div>
<br>
<div style="height: 20px; padding-top: 4px;">Item 5</div>
<br>
</div>
<div class="schedule_item">
<div style="background-color:#08011c; color: #FFF; padding: 5px;">Due Date</div>
<div style="height: 17px; padding-top: 2px;">
<input type="text" id="datepicker1" style="width: 100px;
height: 10px;" value="" class="hasDatepicker">
</div>
<br>
<div style="height: 17px; padding-top: 2px;">
<input type="text" id="datepicker2" style="width: 100px;
height: 10px;" value="" class="hasDatepicker">
</div>
<br>
<div style="height: 17px; padding-top: 2px;">
<input type="text" id="datepicker3" style="width: 100px;
height: 10px;" value="" class="hasDatepicker">
</div>
<br>
<div style="height: 17px; padding-top: 2px;">
<input type="text" id="datepicker4" style="width: 100px;
height: 10px;" value="" class="hasDatepicker">
</div>
<br>
<div style="height: 17px; padding-top: 2px;">
<input type="text" id="datepicker5" style="width: 100px;
height: 10px;" value="" class="hasDatepicker">
</div>
<br>
</div>
<div class="schedule_item">
<div style="background-color:#08011c; color: #FFF; padding: 5px;">Status</div>
<div>
<select style="height: 30px; width: 100px;">
<option></option>
<option>----</option>
</select>
</div>
<br>
<div>
<select style="height: 30px; width: 100px;">
<option></option>
<option>----</option>
</select>
</div>
<br>
<div>
<select style="height: 30px; width: 100px;">
<option></option>
<option>----</option>
</select>
</div>
<br>
<div>
<select style="height: 30px; width: 100px;">
<option></option>
<option>----</option>
</select>
</div>
<br>
<div>
<select style="height: 30px; width: 100px;">
<option></option>
<option>----</option>
</select>
</div>
<br>
</div>
<div class="schedule_item">
<div style="color: #FFF; padding: 5px;"> </div>
<div>
<input type="submit" id="update" value="Update" style="width: 100px;">
</div>
<br>
<div>
<input type="submit" id="update" value="Update" style="width: 100px;">
</div>
<br>
<div>
<input type="submit" id="update" value="Update" style="width: 100px;">
</div>
<br>
<div>
<input type="submit" id="update" value="Update" style="width: 100px;">
</div>
<br>
<div>
<input type="submit" id="update" value="Update" style="width: 100px;">
</div>
<br>
</div>
</div>
CSS
.schedule_wrapper {
overflow:hidden;
margin-bottom:10px;
}
.schedule_item {
float:left;
margin:2px;
}
body {
font-family: Verdana;
}
input[type="submit"] {
background: #52A8E8;
border: 0;
border-bottom: 2px solid #4081AF;
color: #fff;
padding: 9px 21px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: auto;
}
input[type="submit"]:hover, input[type="submit"]:active {
cursor: pointer;
background: #377AD0;
border: 0;
border-bottom: 2px solid transparent;
}
input[type="submit"] + a {
margin-left: 22px;
}