Question

我正在尝试从广告系列开始时使用日期选择器和时间选择器，并在结束时使用类似的一对。

我希望将它们与时间选择器上方的日期选择器并排放置，因此：

-------------------------  
| ---------  ---------  |  
| | start  | | end    | |   
| | date   | | date   | |  
| | picker | | picker | |  
| ----------  --------- |  
| ---------   --------  |  
| | start  | | end    | |  
| | time   | | time   | |  
| | picker | | picker | |  
| ----------  --------- |  
-------------------------

我试过这个

<div>
   <span>
       <datepicker ng-model="campaignStartDate" datepicker-options="datePickerOptions"></datepicker>

       <timepicker ng-model="campaignStartTime" show-meridian=true></timepicker>                            
   </span>

    <span>
         <datepicker ng-model="campaignEndDate" min-date="minDate" show-weeks="true"></datepicker>

          <timepicker ng-model="campaignEndTime" show-meridian=true></timepicker>                            
     </span>
</div>

但它并没有按照我想要的方式显示 - 我做错了什么？

我意识到，正如我在下面的评论中所述，我现在是时候重新磨练我的CSS技能了。去年这个时候，我不会问这个问题。

对于其他对基于CSS的网格系统感兴趣的人，有几个在线生成器，以及W3C的a great description of CSS grids。您可能需要阅读几次，但它解释了您现在需要的所有内容。

提示：CSS3实际上支持网格。请查看this，this和this等等等。

Answer 1

这是一个简单的示例，说明了并排显示元素的一种方法：

＆＃13;

.boxes,
.boxes div {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.boxes div {
  float: left;
  margin: 1%;
  width: 48%;
  border: solid 1px blue;
  min-height: 100px;
}

＆＃13;

<div class="boxes">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
</div>

＆＃13;

又一个CSS布局之谜

1 个答案: