Css проблема с 2 делами

Question

Css проблема с 2 делами

0

У меня было 2 divs в 1 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>

Здесь css divs:

#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;
}

Любая помощь очень ценится !!

С наилучшими пожеланиями

user3411054 18 март 2014, в 20:51

Источник

2

Какой вопрос? Кроме того, ваш jsFiddle не представляет код, который вы разместили здесь.
DACrosby 18 март 2014, в 19:37
0

Я не понимаю, ваша скрипка, кажется, не имеет ничего общего с кодом, который вы опубликовали в своем вопросе. Может быть, вы разместили неправильную ссылку на скрипку? Кроме того, поскольку ваш вопрос на самом деле не относится к border-radius , вы можете подумать об обрезке этой части CSS, чтобы сделать ее более читабельной ...
Dryden Long 18 март 2014, в 19:39
0

Итак, два div должны быть рядом друг с другом, вместо этого теперь «правый» div находится под левым.
user3411054 18 март 2014, в 19:55

Показать ещё 1 комментарий

Теги:

html

css

table

2 ответа

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>

AvrilAlejandro 18 март 2014, в 19:16

Ещё вопросы

Какой вопрос? Кроме того, ваш jsFiddle не представляет код, который вы разместили здесь.
Я не понимаю, ваша скрипка, кажется, не имеет ничего общего с кодом, который вы опубликовали в своем вопросе. Может быть, вы разместили неправильную ссылку на скрипку? Кроме того, поскольку ваш вопрос на самом деле не относится к border-radius , вы можете подумать об обрезке этой части CSS, чтобы сделать ее более читабельной ...
Итак, два div должны быть рядом друг с другом, вместо этого теперь «правый» div находится под левым.

Kheema Pandey · Accepted Answer · 2014-03-18T19-17-00.000Z

Не было никаких проблем с вашим CSS; однако проблема была связана с HTML. так как вы использовали слишком много div для создания страницы. как-то один <div> id="contlinks" не был закрыт должным образом.

Я немного изменил CSS. вы можете увидеть рабочую демоверсию. http://jsbin.com/faqulego/1/

Последний вопрос: кажется, что мой h2 от левого div немного выше, чем мой h2 от правого div. Хотя у них одинаковый стиль?
потому что в <div id="contrechts"> вы используете дополнительный <div id="contrechts"> h2 поэтому вы видите другое выравнивание.