Javascript DOM如何添加两个相邻的div（其中包含jQuery）？

我正在尝试正确对齐我的两个日历，以便我的文本和日历正确对齐

我认为有两种不同的方法可以做到这一点：（但我不知道如何做到）

在表中添加jquery语句，以便它们按照表的格式正确排列

修复css，使其正确格式化到页面

这就是它看起来的样子：

这就是我想要它的样子：

---

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

//对于id为roomForDates的空div，我创建了一个表格以将文本居中
var holdTheDateInfo=document.getElementById（'roomForDates'）；
var htmlForDateTitles=''；
htmlForDateTitles+=“开始日期：”；
htmlForDateTitles+=“结束日期：”；
htmlForDateTitles+=''；
holdTheDateInfo.innerHTML+=htmlForDateTitles；

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

roomForStartDates

和

roomForEndDates

$（文档）.ready（函数（）{
//创建日历。导航受到限制
//通过设置“最小”和“最大”日期。
$（“#roomForStartDates”）.jqxCalendar({
宽度：220，
最小值：新日期（2010年0月1日），
最大值：新日期（2014年11月31日），
身高：220
});
$（“#roomForEndDates”）.jqxCalendar({
宽度：220，
最小值：新日期（2010年0月1日），
最大值：新日期（2014年11月31日），
身高：220
});
}); // 结束文件

这是我目前的css，我有麻烦

#开始日期的房间{
浮动：左；文本对齐：居中；
}
#房间日期{
浮动：左；左边距：50px；文本对齐：居中；
}

提前谢谢你！！！！如果你有任何问题，请告诉我

---

迄今为止的最新情况：

---

我很想把它们放在一张表中（正如我在方法1中所说的），但我不知道如何：（-

下面是如何创建一个包含一行和两个数据单元（列）的HTML表。如果对两个表使用相同的布局，它们将显示为相同的

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

$..…用于日历1
$..…用于日历2

避免对一般问题发表过多评论，因为最好避免使用上述方法作为答案。只需根据这一点进行调整，就足以使

的
文本对齐：居中。容器
：

<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>

由于这只是一个演示示例，您的页面可能需要调整.container类中的宽度。此宽度应与2 x日历宽度+边距匹配由于两个容器都有200px的宽度和10px的余量，所以这里是420px。为了定位整个div的中心位置，我刚刚添加了另一个div作为所有容器的包装，并使用了不同的方法之一

如果这对您的布局不起作用，请查看建议的方法，例如：此处：

或者在这里留下评论，以防这个可能的解决方案出现问题。
为什么你有
宽度：35%；
s？我尝试了不同的百分比，以确定什么是可行的。我最初尝试了50%，但这使它们之间的距离更远！完全去掉宽度字段。只是做了一个小提琴来说明我的意思：只是更新了提琴，2nd版本，匹配您的类名，没有明确的元素，但有一个额外的容器；您只需要调整宽度（容器=2 x div-margin的宽度）），我已经尝试通过htmlForDateTitles+='$（document.ready（function（）{$（“#roomForStartDates”）.jqxCalendar（{宽度：220，最小：新日期（2010,0,1），最大：新日期（2014,11,31），身高：220}）；}）；；但我一直运气不好。你对我有什么建议吗？
.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;
}