Question

我正在尝试正确对齐我的两个日历，以便我的文字和我的日历正确排列。

我认为有两种不同的方法可以解决这个问题:(但我不知道如何做到这一点）

在表格中添加jquery语句，以便它们按表格格式正确排列
修复css以使其正确格式化为页面

这就是它的样子：

enter image description here

这就是我想要的样子：

enter image description here

这是我的javascript，将“开始日期：”和“结束日期：”文本添加到我的表格

// to my empty div with the id of roomForDates I create a table to center the text
var holdTheDateInfo = document.getElementById('roomForDates');
var htmlForDateTitles = '<center><table width="400" cellspacing="1" cellpadding="5">';
htmlForDateTitles += '<tr><td><center> Start Date: </center></td>';
htmlForDateTitles += '<td><center> End Date: </center></td></tr>';
htmlForDateTitles += '</table></center>';
holdTheDateInfo.innerHTML += htmlForDateTitles;

这是我的jQuery，它会将两个日历添加到名为div和roomForStartDates

roomForEndDates

$(document).ready(function () {
    // Create the Calendar. The navigation is restricted
    // by setting the "min" and "max" dates.
    $("#roomForStartDates").jqxCalendar({
        width: 220,
        min: new Date(2010, 0, 1),
        max: new Date(2014, 11, 31),
        height: 220
    });
    $("#roomForEndDates").jqxCalendar({
        width: 220,
        min: new Date(2010, 0, 1),
        max: new Date(2014, 11, 31),
        height: 220
    });
}); // end document

这是我目前的CSS，我遇到了麻烦。

#roomForStartDates {
    float: left;text-align:center;
}
#roomForEndDates {
    float: left;margin-left:50px;text-align:center;
}

提前谢谢!!!!如果您有任何疑问，请与我们联系!!!

到目前为止更新：

enter image description here

Answer 1

我很想把它们放进一张桌子里（就像我在方法＃1中所说的那样），但我不知道如何:( -

以下是如何制作一个包含两个数据单元格（列）的HTML表格。如果对两个表使用相同的布局，它们将显示为相同。

<table>
  <tr>
    <td>
    $..... for calendar 1
    </td>
    <td>
    $..... for calendar 2
    </td>
 </tr>
</table>

Answer 2

为避免对一般性问题提出太多评论，因为最好只采用上述方法作为答案。只需将Fiddle调整为此，因为text-align: center .container就足够了<div class="mainContainer"> <div class="container"> <div class="image">__________</div> </div> <div class="container"> <div id="roomForStartDates">Start Date</div> <div id="roomForEndDates">End Date</div> </div> <div class="container"> <div class="jqxCalendar">start calendar</div> <div class="jqxCalendar">end calendar</div> </div> </div>：

.mainContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div.container {
  width: 420px;
  text-align:center;
}
#roomForStartDates, #roomForEndDates, .jqxCalendar {
  float: left;
  width: 200px;
  margin-left:10px;
}

.jqxCalendar {
  height: 200px;
  background-color:#ccc;
}

CSS：

{{1}}

由于它只是演示的一个示例，因此对页面进行必要的调整可能是调整.container类的宽度。此宽度应匹配2 x日历宽度+边距。由于两个容器的宽度分别为200px和10px左边，因此这里的容量为420px。为了定位整个div居中，我刚刚添加了另一个div作为所有容器的包装器，并使用了一种不同的方法。

如果这对您的布局不起作用，请查看建议的方法，例如：在这里：Stackoverflow - How to put a div in center of browser using CSS
如果这个可能的解决方案出现问题，请在这里发表评论。

DOM如何在彼此旁边添加两个div（其中包含jQuery）？

2 个答案: