Question

参考此CSS和HTML代码。

你能告诉我如何将div leaveright放在div leftleft的右边吗？

http://jsfiddle.net/MalcollmS/ztsgyqmu/7/

感谢。

/*************************/
/* TIMESHEET EDITOR      */
/*************************/
.clear { clear: both; }

#weekselector {
    clear:both;
}

#weekselector div {
    width:50px;
    border:1px solid black;
    float:left
}

#dayselector {
    margin-top:20px;
}

#dayselector div{
    border:1px solid black;
    width:40px;
    float:left;
}

.hoursmins {
    float:left;
    margin-top:20px;
}

.hourselector {
    width:400px;
    float:left;
}

.hourselector div {
    width:50px;
    border:1px solid black;
    float:left;
}

#starthoursmins, #finishhoursmins{
float:left;
}

.minselector {
    width:40px;
    float:right;
}

.minselector div {
    width:30px;
    border: 1px solid black;
}

#lunchselector {
    float:left;
    width:250px;
    margin-top:20px;
}

#lunchselector div {
    width:50px;
    border:1px solid black;
    float:left;
}

#editorleft {
    float:left;
}

#leaveselector {
    float:left;
    width:300px;
    margin-top:20px;
}

#leaveleft {
    float:left;
}
#leaveright {
    float:left;
}

#leaveleft div{
   border:1px solid black;
   width:150px;
}
#leaveright div{
   border:1px solid black;
   width:150px;
}

<div id="timesheeteditor">
    <div id="weekselector">
        <div>Week 1</div>
        <div>Week 2</div>
        <div>Week 3</div>
        <div>Week 4</div>
    </div>
    <div class="clear"></div>
    <div id="dayselector">
                <div>Mon</div>
                <div>Tue</div>
                <div>Wed</div>
                <div>Thu</div>
                <div>Fri</div>
                <div>Sat</div>
                <div>Sun</div>

    </div>
    <div class="clear"></div>
    <div id="hoursmins">
        <div id="starthoursmins"  class="hoursmins">
            <div id="starthourselector"  class="hourselector">
                        <div>00:00</div>
                        <div>01:00</div>
                        <div>02:00</div>
                        <div>03:00</div>
                        <div>04:00</div>
                        <div>05:00</div>
                        <div>06:00</div>
                        <div>07:00</div>
                        <div>08:00</div>
                        <div>09:00</div>
                        <div>10:00</div>
                        <div>11:00</div>
                        <div>12:00</div>
                        <div>13:00</div>
                        <div>14:00</div>
                        <div>15:00</div>
                        <div>16:00</div>
                        <div>17:00</div>
                        <div>18:00</div>
                        <div>19:00</div>
                        <div>20:00</div>
                        <div>21:00</div>
                        <div>22:00</div>
                        <div>23:00</div>
                        <div>00:00</div>

            </div>

            <div id="startminselector"  class="minselector">
                <div>15</div><div>30</div><div>45</div>
            </div>
        </div>
        <div id="finishhoursmins" class="hoursmins">
            <div id="finishhourselector" class="hourselector">
                        <div>00:00</div>
                        <div>01:00</div>
                        <div>02:00</div>
                        <div>03:00</div>
                        <div>04:00</div>
                        <div>05:00</div>
                        <div>06:00</div>
                        <div>07:00</div>
                        <div>08:00</div>
                        <div>09:00</div>
                        <div>10:00</div>
                        <div>11:00</div>
                        <div>12:00</div>
                        <div>13:00</div>
                        <div>14:00</div>
                        <div>15:00</div>
                        <div>16:00</div>
                        <div>17:00</div>
                        <div>18:00</div>
                        <div>19:00</div>
                        <div>20:00</div>
                        <div>21:00</div>
                        <div>22:00</div>
                        <div>23:00</div>
                        <div>00:00</div>

            </div>

            <div id="finishminselector" class="minselector">
                <div>15</div><div>30</div><div>45</div>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div>
        <div id="lunchselector">
            <div>15</div><div>30</div><div>45</div><div>1:00</div>
            <div>1:15</div><div>1:30</div><div>1:45</div><div>2:00</div>
            <div>2:15</div><div>2:30</div><div>2:45</div><div>3:00</div>
            <div>3:15</div><div>3:30</div><div>3:45</div><div>4:00</div>
        </div>
        <div id="leaveselector">
            <div id="leaveleft">
                        <div id="Annual_Unpaid_OZ">Annual Unpaid OZ</div>                       
                        <div id="OffShore_Unpaid">OffShore Unpaid</div>                       
                        <div id="OffShore_Paid">OffShore Paid</div>                       
                        <div id="Annual_Paid_OZ">Annual Paid OZ</div>                       
                        <div id="Personal_Paid">Personal Paid</div>                       
                        <div id="Public_Hols_Paid">Public Hols Paid</div>                       
                        <div id="Public_Hols_Unpaid">Public Hols Unpaid</div>                       
                        <div id="Personal_Unpaid">Personal Unpaid</div>                       
                        <div id="Worked">Worked</div>                       
                        <div id="Not_Worked">Not Worked</div>                       

            </div>
            <div id="leaveright">
                        <div id="HalfDay_Worked">HalfDay Worked</div>                       
                        <div id="Half_Annual_Paid_OZ">Half Annual Paid OZ</div>                       
                        <div id="Half_Personal_Paid">Half Personal Paid</div>                       
                        <div id="Half_Personal_Unpaid">Half Personal Unpaid</div>                       
                        <div id="Half_Annual_Unpaid_OZ">Half Annual Unpaid OZ</div>                       
                        <div id="Half_Public_Hols_Paid">Half Public Hols Paid</div>                       
                        <div id="Half_Public_Hols_Unpaid">Half Public Hols Unpaid</div>                       
                        <div id="Half_OffShore_Unpaid">Half OffShore Unpaid</div>                       
                        <div id="Half_OffShore_Paid">Half OffShore Paid</div>                       

            </div>
        </div>
    </div>
</div>

Answer 1

问题是 divs 由于边框而溢出容器。要在宽度计算中包含边框，您必须使用box-sizing: border-box;。

小提琴：http://jsfiddle.net/ztsgyqmu/10/

参考：MDN

Answer 2

更改以下div的CSS属性：

#leaveselector {
    float:left;
    width:310px;
    margin-top:20px;
}
#leaveleft {
    float: left;
}
#leaveright {
    float: right;
}

Fiddle

上的演示

CSS Divs和float：左边的问题

2 个答案:

Fiddle