0

将相邻的 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;">&nbsp;</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;
}
4

0 回答 0