Html Css问题与2个div

我有两个div在一个div包装中。因为我在左列放了一张表， 右边的那个刚从它下面钻出来

有什么帮助吗？

以下是html：

<div id="contentwrap">
  <div id="content">
    <p>
    <div id="contlinks">
      <h2>Openingsuren</h2>
      <p>
      <div class="menukaart">
        <table>
          <tbody>
            <tr>
              <td>Maandag</td>
              <td><span> 11.<sup>30</sup> - 23<sup>.00</sup></span></td>
            </tr>
            <tr>
              <td>Woensdag</td>
              <td>11.<sup>30</sup> - 23<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Donderdag</td>
              <td>11.<sup>30</sup> - 23<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Vrijdag</td>
              <td>11.<sup>30</sup> - 02<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Zaterdag</td>
              <td>11.<sup>30</sup> - 02<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Zondag</td>
              <td>11.<sup>30</sup> - 23<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Dinsdag</td>
              <td>gesloten</td>
            </tr>
          </tbody>
        </table>
        </p>
        <h2>&nbsp;</h2>
        <h2>Leveringsuren</h2>
              <p>
      <div class="menukaart">
        <table>
          <tbody>
            <tr>
              <td>Maandag</td>
              <td><span> 11.<sup>30</sup> - 22<sup>.30</sup></span></td>
            </tr>
            <tr>
              <td>Woensdag</td>
              <td>11.<sup>30</sup> - 22<sup>.30</sup></td>
            </tr>
            <tr>
              <td>Donderdag</td>
              <td>11.<sup>30</sup> - 22<sup>.30</sup></td>
            </tr>
            <tr>
              <td>Vrijdag</td>
              <td>11.<sup>30</sup> - 01<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Zaterdag</td>
              <td>11.<sup>30</sup> - 01<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Zondag</td>
              <td>11.<sup>30</sup> - 22<sup>.30</sup></td>
            </tr>
          </tbody>
        </table>
        </p>
      </div>
      <div id="contrechts">
        <h2>&nbsp;</h2>
        <h2>Routebeschrijving</h2>
        <p>
          <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2513.590720583988!2d4.7124239999999995!3d50.949781699999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x386d8d5f9b06161f!2sMerdin+2!5e0!3m2!1snl!2sbe!4v1395157948750" width="470" height="300" frameborder="0" style="border:0"></iframe>
        </p>
      </div>
      </p>
    </div>
  </div>

这张桌子：

.menukaart {
    margin:0px;padding:0px;
    width:450px;
    border:0px solid #3f7f00;

    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;

    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;

    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;

    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}.menukaart table{
    border-collapse: collapse;
        border-spacing: 0;
    width:450px;
    height:100%;
    margin:0px;padding:0px;
}.menukaart tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}

.menukaart table tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;

}.menukaart tr:hover td{

}
.menukaart tr:nth-child(odd){ background-color:#d4ffaa; }
.menukaart tr:nth-child(even)    { background-color:#ffffff; }.menukaart td{
    vertical-align:middle;


    border:1px solid #3f7f00;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-size:11px;
    font-family: Century Gothic, sans-serif;
    font-weight:normal;
    color:#000000;
}.menukaart tr:last-child td{
    border-width:0px 1px 0px 0px;
}.menukaart tr td:last-child{
    border-width:0px 0px 1px 0px;
}.menukaart tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}
.menukaart tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
}

---

非常感谢任何帮助

这是错误：

为空且

无序

正确：

html

罗特伯施里金
Openingsuren
马恩达格
11.30 - 23.00
沃恩斯达格
11.30 - 23.00
东德达格
11.30 - 23.00
维里达格
11.30 - 02.00
扎特达格
11.30 - 02.00
宗达格
11.30 - 23.00
丁斯达克
格斯洛滕
勒文苏伦
马恩达格
11.30 - 22.30
沃恩斯达格
11.30 - 22.30
东德达格
11.30 - 22.30
维里达格
11.30 - 01.00
扎特达格
11.30 - 01.00
宗达格
11.30 - 22.30

css

#内容包装{
最小宽度：1000px；
保证金：0自动；
}
#内容{
背景：#FFFFFF；
边界半径：10px；
边框：1px实心#ebebebeb；
保证金：5px；
溢出：隐藏；
}
#联系{
浮动：左；
宽度：480px；
左边距：5px；
边缘底部：10px；
}
#续{
字体大小：粗体；
颜色：#000；
文字装饰：无；
}
#续a：悬停{
字体大小：粗体；
颜色：#000；
文本装饰：下划线
}
#contlinks h2{
字体大小：20px；
}
#合同{
浮动：对；
宽度：480px；
右边距：5px；
边缘底部：10px；
}
#合同h2{
字体大小：20px；
}
#合同a{
字体大小：粗体；
颜色：#000；
文字装饰：无；
}
#合同a：悬停{
字体大小：粗体；
颜色：#000；
文本装饰：下划线
}
梅努卡特先生{
边距：0px；填充：0px；
宽度：450px；
边框：0px实心#3f7f00；
-moz边框半径左下角：0px；
-webkit边框左下半径：0px；
边框左下半径：0px；
-moz边框半径右下角：0px；
-webkit边框右下半径：0px；
边框右下半径：0px；
-moz边框半径右上角：0px；
-webkit边框右上角半径：0px；
边框右上角半径：0px；
-左上角moz边界半径：0px；
-webkit边框左上半径：0px；
边框左上半径：0px；
}.menukaart表格{
边界塌陷：塌陷；
边界间距：0；
宽度：450px；
身高：100%；
边距：0px；填充：0px；
}.menukaart tr:last child td:last child{
-moz边框半径右下角：0px；
-webkit边框右下半径：0px；
边框右下半径：0px；
}
.menukaart表tr:第一个孩子td:最后一个孩子{
-moz边框半径右上角：0px；
-webkit边框右上角半径：0px；
边框右上角半径：0px；
}梅努卡尔特：悬停td{
}
menukaart tr:n个孩子（奇数）{背景色：#d4ffaa；}
.menukaart tr:n个孩子（偶数）{背景色：#ffffff；}.menukaart td{
垂直对齐：中间对齐；
边框：1px实心#3f7f00；
边框宽度：0px 1px 0px；
文本对齐：左对齐；
填充：7px；
字体大小：11px；
字体系列：世纪哥特式，无衬线；
字体大小：正常；
颜色：#000000；
}梅努卡特：最后一个孩子{
边框宽度：0px 1px 0px 0px；
}梅努卡特：最后一个孩子{
边框宽度：0px 0px 1px 0px；
}.menukaart tr:last child td:last child{
边框宽度：0px 0px 0px 0px；
}
menukaart tr：第一个孩子td：最后一个孩子{
边框宽度：0px 0px 1px 1px；
}

您的CSS没有任何问题；然而问题是HTML。因为您使用了太多的div来构建页面。不知何故，一个

id=“contlinks”

未正确关闭

---

我对CSS做了一点修改。您可以看到正在运行的演示

问题是什么？另外，您的JSFIDLE并不代表您在这里发布的代码。我不明白，您的FIDLE似乎与您在问题中发布的代码无关。也许你贴错了小提琴的链接？此外，由于你的问题并不是真正的关于<代码>边界半径< /代码>，你可能需要考虑修剪你的CSS的一部分以使它更可读……嗯，这两个div应该是彼此相邻的，而不是现在的“右边”。div在左边的下方。最后一个问题：看起来左边div的h2位置比右边div的h2位置略高。虽然它们有相同的样式？因为在

下您使用了额外的

h2

标题。这就是为什么您看到不同的对齐方式。

.menukaart {
    margin:0px;padding:0px;
    width:450px;
    border:0px solid #3f7f00;

    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;

    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;

    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;

    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}.menukaart table{
    border-collapse: collapse;
        border-spacing: 0;
    width:450px;
    height:100%;
    margin:0px;padding:0px;
}.menukaart tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}

.menukaart table tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;

}.menukaart tr:hover td{

}
.menukaart tr:nth-child(odd){ background-color:#d4ffaa; }
.menukaart tr:nth-child(even)    { background-color:#ffffff; }.menukaart td{
    vertical-align:middle;


    border:1px solid #3f7f00;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-size:11px;
    font-family: Century Gothic, sans-serif;
    font-weight:normal;
    color:#000000;
}.menukaart tr:last-child td{
    border-width:0px 1px 0px 0px;
}.menukaart tr td:last-child{
    border-width:0px 0px 1px 0px;
}.menukaart tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}
.menukaart tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
}

<div id="contentwrap">
  <div id="content">
    <div id="contrechts">
        <h2>&nbsp;</h2>
        <h2>Routebeschrijving</h2>
          <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2513.590720583988!2d4.7124239999999995!3d50.949781699999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x386d8d5f9b06161f!2sMerdin+2!5e0!3m2!1snl!2sbe!4v1395157948750" width="470" height="300" frameborder="0" style="border:0"></iframe>
    </div>
    <div id="contlinks">
      <h2>Openingsuren</h2>
      <div class="menukaart">
        <table>
          <tbody>
            <tr>
              <td>Maandag</td>
              <td><span> 11.<sup>30</sup> - 23<sup>.00</sup></span></td>
            </tr>
            <tr>
              <td>Woensdag</td>
              <td>11.<sup>30</sup> - 23<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Donderdag</td>
              <td>11.<sup>30</sup> - 23<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Vrijdag</td>
              <td>11.<sup>30</sup> - 02<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Zaterdag</td>
              <td>11.<sup>30</sup> - 02<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Zondag</td>
              <td>11.<sup>30</sup> - 23<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Dinsdag</td>
              <td>gesloten</td>
            </tr>
          </tbody>
        </table>
        <h2>&nbsp;</h2>
        <h2>Leveringsuren</h2>
      </div>
      <div class="menukaart">
        <table>
          <tbody>
            <tr>
              <td>Maandag</td>
              <td><span> 11.<sup>30</sup> - 22<sup>.30</sup></span></td>
            </tr>
            <tr>
              <td>Woensdag</td>
              <td>11.<sup>30</sup> - 22<sup>.30</sup></td>
            </tr>
            <tr>
              <td>Donderdag</td>
              <td>11.<sup>30</sup> - 22<sup>.30</sup></td>
            </tr>
            <tr>
              <td>Vrijdag</td>
              <td>11.<sup>30</sup> - 01<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Zaterdag</td>
              <td>11.<sup>30</sup> - 01<sup>.00</sup></td>
            </tr>
            <tr>
              <td>Zondag</td>
              <td>11.<sup>30</sup> - 22<sup>.30</sup></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<style type="text/css">
  #contentwrap {
 min-width:1000px;
    margin: 0 auto;

}

#content {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #ebebeb;
    margin: 5px;
    overflow:hidden;
}

#contlinks{

float:left;
width:480px;
margin-left:5px;
margin-bottom:10px;
}

#contlinks a{
    font-weight:bold;
    color:#000;
    text-decoration:none;
}

#contlinks a:hover{
    font-weight:bold;
    color:#000;
    text-decoration:underline
}
#contlinks h2{

font-size:20px;
}

#contrechts{
float:right;
width:480px;
margin-right:5px;
margin-bottom:10px;
}

#contrechts h2{

font-size:20px;
}

#contrechts a{
    font-weight:bold;
    color:#000;
    text-decoration:none;
}

#contrechts a:hover{
    font-weight:bold;
    color:#000;
    text-decoration:underline
}
.menukaart {
    margin:0px;padding:0px;
    width:450px;
    border:0px solid #3f7f00;

    -moz-border-radius-bottomleft:0px;
    -webkit-border-bottom-left-radius:0px;
    border-bottom-left-radius:0px;

    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;

    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;

    -moz-border-radius-topleft:0px;
    -webkit-border-top-left-radius:0px;
    border-top-left-radius:0px;
}.menukaart table{
    border-collapse: collapse;
        border-spacing: 0;
    width:450px;
    height:100%;
    margin:0px;padding:0px;
}.menukaart tr:last-child td:last-child {
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    border-bottom-right-radius:0px;
}

.menukaart table tr:first-child td:last-child {
    -moz-border-radius-topright:0px;
    -webkit-border-top-right-radius:0px;
    border-top-right-radius:0px;

}.menukaart tr:hover td{

}
.menukaart tr:nth-child(odd){ background-color:#d4ffaa; }
.menukaart tr:nth-child(even)    { background-color:#ffffff; }.menukaart td{
    vertical-align:middle;


    border:1px solid #3f7f00;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    font-size:11px;
    font-family: Century Gothic, sans-serif;
    font-weight:normal;
    color:#000000;
}.menukaart tr:last-child td{
    border-width:0px 1px 0px 0px;
}.menukaart tr td:last-child{
    border-width:0px 0px 1px 0px;
}.menukaart tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
}
.menukaart tr:first-child td:last-child{
    border-width:0px 0px 1px 1px;
}
</style>