如何让这两个日历彼此相邻？

Question

我有两个简单的HTML表格日历，但出于某种原因，它们并不是彼此相邻的。我怎样才能让它们并排？这是我现在的代码：

<div class="title">June 2014</div>
<table border="1">
    <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
    <tr><td><span class="date">1</span></td><td><span class="date">2</span></td><td><span class="date">3</span></td><td><span class="date">4</span></td><td><span class="date">5</span></td><td><span class="date">6</span></td><td><span class="date">7</span></td></tr>
    <tr><td><span class="date">8</span></td><td><span class="date">9</span></td><td><span class="date">10</span></td><td><span class="date">11</span></td><td><span class="date">12</span></td><td><span class="date">13</span></td><td><span class="date">14</span></td></tr>
    <tr><td><span class="date">15</span></td><td><span class="date">16</span></td><td><span class="date">17</span></td><td><span class="date">18</span></td><td><span class="date">19</span></td><td><span class="date">20</span></td><td><span class="date">21</span></td></tr>
    <tr><td><span class="date">22</span></td><td><span class="date">23</span></td><td><span class="date">24</span></td><td><span class="date">25</span></td><td><span class="date">26</span></td><td><span class="date">27</span></td><td><span class="date">28</span></td></tr>
    <tr><td><span class="date">29</span></td><td><span class="date">30</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td></tr>
</table>
<p>
<div class="title">July 2014</div>
<table border="1">
    <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
    <tr><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">1</span></td><td><span class="date">2</span></td><td><span class="date">3</span></td><td><span class="date">4</span></td><td><span class="date">5</span></td></tr>
    <tr><td><span class="date">6</span></td><td><span class="date">7</span></td><td><span class="date">8</span></td><td><span class="date">9</span></td><td><span class="date">10</span></td><td><span class="date">11</span></td><td><span class="date">12</span></td></tr>
    <tr><td><span class="date">13</span></td><td><span class="date">14</span></td><td><span class="date">15</span></td><td><span class="date">16</span></td><td><span class="date">17</span></td><td><span class="date">18</span></td><td><span class="date">19</span></td></tr>
    <tr><td><span class="date">20</span></td><td><span class="date">21</span></td><td><span class="date">22</span></td><td><span class="date">23</span></td><td><span class="date">24</span></td><td><span class="date">25</span></td><td><span class="date">26</span></td></tr>
    <tr><td><span class="date">27</span></td><td><span class="date">28</span></td><td><span class="date">29</span></td><td><span class="date">30</span></td><td><span class="date">31</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td></tr>
</table>

Answer 1

这是一种简单的方法。将它们放在容器：

中

<div class="calendar">
    <div class="title">June 2014</div>
    <table>...</table>
</div>
<div class="calendar">
    <div class="title">July 2014</div>
    <table>...</table>
</div>

并将这些容器显示为内嵌块：

.calendar {
    display:inline-block;
}

请参阅： JSFiddle

只要页面宽度并排放置，它们就会并排放置。

如果您希望它们始终并排，即使它们不适合窗口（您需要侧向滚动），然后将容器放在包含两者的外部容器中其中，并使该容器的宽度为适合两个日历的固定大小。

Answer 2

你可以在下面这样做。链接到jsfiddle

<table>
    <tr>
        <td>
            <div class="title">June 2014</div>
            < -- Your Table content for June 2014 -->
        </td>
        <td>
            <div class="title">July 2014</div>
            < -- Your Table content for July 2014 -->
        </td>
    </tr>
</table>

和完整的代码..

 <table>
    <tr>
        <td>
            <div class="title">June 2014</div>
            <table border="1">
    <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
    </tr>
    <tr>
        <td><span class="date">1</span></td>
        <td><span class="date">2</span></td>
        <td><span class="date">3</span></td>
        <td><span class="date">4</span></td>
        <td><span class="date">5</span></td>
        <td><span class="date">6</span></td>
        <td><span class="date">7</span></td>
    </tr>
    <tr>
        <td><span class="date">8</span></td>
        <td><span class="date">9</span></td>
        <td><span class="date">10</span></td>
        <td><span class="date">11</span></td>
        <td><span class="date">12</span></td>
        <td><span class="date">13</span></td>
        <td><span class="date">14</span></td>
    </tr>
    <tr>
        <td><span class="date">15</span></td>
        <td><span class="date">16</span></td>
        <td><span class="date">17</span></td>
        <td><span class="date">18</span></td>
        <td><span class="date">19</span></td>
        <td><span class="date">20</span></td>
        <td><span class="date">21</span></td>
    </tr>
    <tr>
        <td><span class="date">22</span></td>
        <td><span class="date">23</span></td>
        <td><span class="date">24</span></td>
        <td><span class="date">25</span></td>
        <td><span class="date">26</span></td>
        <td><span class="date">27</span></td>
        <td><span class="date">28</span></td>
    </tr>
    <tr>
        <td><span class="date">29</span></td>
        <td><span class="date">30</span></td>
        <td><span class="date">&nbsp;</span></td>
        <td><span class="date">&nbsp;</span></td>
        <td><span class="date">&nbsp;</span></td>
        <td><span class="date">&nbsp;</span></td>
        <td><span class="date">&nbsp;</span></td>
    </tr>
</table>
        </td>
        <td>
            <div class="title">July 2014</div>
             <table border="1">
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
        <tr>
            <td><span class="date">&nbsp;</span></td>
            <td><span class="date">&nbsp;</span></td>
            <td><span class="date">1</span></td>
            <td><span class="date">2</span></td>
            <td><span class="date">3</span></td>
            <td><span class="date">4</span></td>
            <td><span class="date">5</span></td>
        </tr>
        <tr>
            <td><span class="date">6</span></td>
            <td><span class="date">7</span></td>
            <td><span class="date">8</span></td>
            <td><span class="date">9</span></td>
            <td><span class="date">10</span></td>
            <td><span class="date">11</span></td>
            <td><span class="date">12</span></td>
        </tr>
        <tr>
            <td><span class="date">13</span></td>
            <td><span class="date">14</span></td>
            <td><span class="date">15</span></td>
            <td><span class="date">16</span></td>
            <td><span class="date">17</span></td>
            <td><span class="date">18</span></td>
            <td><span class="date">19</span></td>
        </tr>
        <tr>
            <td><span class="date">20</span></td>
            <td><span class="date">21</span></td>
            <td><span class="date">22</span></td>
            <td><span class="date">23</span></td>
            <td><span class="date">24</span></td>
            <td><span class="date">25</span></td>
            <td><span class="date">26</span></td>
        </tr>
        <tr>
            <td><span class="date">27</span></td>
            <td><span class="date">28</span></td>
            <td><span class="date">29</span></td>
            <td><span class="date">30</span></td>
            <td><span class="date">31</span></td>
            <td><span class="date">&nbsp;</span></td>
            <td><span class="date">&nbsp;</span></td>
        </tr>
    </table>
        </td>
    </tr>
</table>