Css问题有2个div

时间：2014-03-18 19:34:50

标签： html css html-table

我在1 div包装器中有2个div。因为我在左栏放了一张桌子， 正确的人刚刚得到它..

有任何帮助吗？ Here's the jsfiddle link

这里是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>

这里是div的CSS：

#contentwrap {
 min-width:1000px;
    float: left;
    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;
}

非常感谢任何帮助！

2 个答案:

答案 0 :(得分：0)

这是错误：<p>为空，<div>无序

正确的：

HTML 

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

CSS 

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

答案 1 :(得分：0)

您的CSS没有任何问题;然而问题在于HTML。因为你使用了太多的div来构建页面。不知何故，<div> id="contlinks"未正确关闭。

我已经修改了一点CSS。你可以看到工作演示。 http://jsbin.com/faqulego/1/

相关问题
最新问题