CSS定位div而不使用表格

Question

我在使用明确的CSS声明时遇到了问题。

所以这就是我想要它的样子：

Fiddle

上的演示

HTML：

<div id="timesheeteditor">
  <div id="weekselector">
    <div>Week 1</div>
    <div>Week 2</div>
    <div>Week 3</div>
    <div>Week 4</div>
  </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 id="editorleft">
    <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 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>
</div>

CSS：

/*************************/
/* TIMESHEET EDITOR      */
/*************************/
#weekselector {
    clear: both;
}

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

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

.hoursmins {
    float: left;
}

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

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

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

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

#lunchselector {
    clear: left;
    width: 250px;
}

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

#editorleft {
    float: left;
}

#leaveselector {
    float: right;
}

Answer 1

您可以创建一个类.clear，并在想要更改行时使用它。

#weekselector {
    float: left;
}

#dayselector {
    float: left;
}

.clear { 
    clear: both;
}

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

Answer 2

DEMO

 #weekselector {

}

.clr{ clear:both;}

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

<div id="timesheeteditor">
    <div id="weekselector">
        <div>Week 1</div>
        <div>Week 2</div>
        <div>Week 3</div>
        <div>Week 4</div>
        <div class="clr"></div><br><br>
    </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 class="clr"></div>

    </div>

Answer 3

尝试替换

#weekselector {
clear:both;
}

使用

#weekselector, #dayselector{
display: block;
clear:both;
}

然后添加

#starthoursmins, #finishhoursmins{
float:left;
}