启用包含表格的div显示在<ul> </ul>的右侧

Question

我想找一些帮助，找出为什么我的id="overalldivcalendartable" div表没有出现在垂直菜单栏的右边，即div id="div_lhs_menu"。

我认为以下内容会有所帮助，但没有运气：

display：inline-block; float：left;

Fiddle code demo

Fiddle full screen demo

HTML：

<div class="horizontalmenubar">

    <label for="show-menu" class="show-menu">MAIN MENU</label>

    <input type="checkbox" id="show-menu" role="button">

    <ul id="menu"> <!-- removed id="menu" -->

        <li><a href="#">H MENU OPTION</a>
            <!-- <ul class="hidden">
                <li><a href="#">SUB MENU OPTION</a></li>
                <li><a href="#">SUB MENU OPTION</a></li>
            </ul>-->
        </li>

        <li>
            <a href="#">H MENU OPTION</a>
            <!-- <ul class="hidden">
                <li><a href="#">SUB MENU OPTION</a></li>
                <li><a href="#">SUB MENU OPTION</a></li>
            </ul>-->
        </li>

        <li>
            <a href="#">H MENU OPTION</a>
            <!-- <ul class="hidden">
                <li><a href="#">SUB MENU OPTION</a></li>
                <li><a href="#">SUB MENU OPTION</a></li>
            </ul>-->
        </li>

        <li><a href="#">H MENU OPTION</a></li>

        <li><a href="#">H MENU OPTION</a></li>
    </ul>
</div>

<div class="clear"></div>

<div id="div_lhs_menu">

    <ul class="js-css-menu responsive vertical">
      <li><a href="#">Link</a>
        <!--<div>

          <ul>
            <li><b>Col 1</b></li>
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
          </ul>

          <ul>
            <li><b>Col 1</b></li>
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
          </ul>
        </div> -->

      </li>

      <li><a href="#">Current</a>
        <!--<div>

          <ul>
            <li><b>Col 1</b></li>
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
          </ul>

          <ul>
            <li><b>Col 1</b></li>
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
          </ul>
        </div> -->
      </li>

      <li><a href="#">Link with Menu</a>
        <!--<div>

          <ul>
            <li><b>Col 1</b></li>
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
          </ul>

          <ul>
            <li><b>Col 1</b></li>
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
          </ul>
        </div> -->
      </li>
    </ul>
</div>

<!-- JS targets this div -->
<div id="overalldivcalendartable">
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Job Title</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>James</td>
                <td>Matman</td>
                <td>Chief Sandwich Eater</td>
            </tr>

            <tr>
                <td>The</td>
                <td>Tick</td>
                <td>Crimefighter Sorta</td>
            </tr>
        </tbody>
    </table>                
</div>

<div class="clear"></div>

<footer id="footer">
    <section>
        <h3>ABOUT US:</h3>

        <p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. <br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. <br></p>             
    </section>

    <section>
        <h3>LIKE, FOLLOW OR WATCH US:</h3>
        <ul class="social">
            <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/facebook.png"/></a></li>               
            <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png"/></a></li>
            <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube.png"/></a></li>                    
        </ul>
    </section>

    <section>
        <h3>CONTACT US:</h3>

        <p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..<br><br><b>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</b><br><br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</p>             
    </section>
</footer>

<footer class="footerTwo">
    <p> Copyright &copy; 2015 | qwerty Ltd | All rights reserved.</p>
</footer>   

CSS：

.horizontalmenubar {
    margin-top: 86px;
    background: #33DD00;
}

/*Strip the ul of padding and list styling*/
.horizontalmenubar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/*Create a horizontal list with spacing*/
.horizontalmenubar li {
    display:inline-block;
    float: left;
    margin-right: 2px;
    width: 200px;
}

/*Style for menu links*/
.horizontalmenubar li a {
    display: block;
    text-align: center;
    line-height: 50px;
    color: #000000;
    background: #D6D6D6;
    text-decoration: none;
}

/*Hover state for top level links*/
.horizontalmenubar li:hover a {
    background: #F5F5F5;
    color: #3366FF;
    border-bottom: 1px solid #000000;
}

/*Hide dropdown links until they are needed*/
.horizontalmenubar li ul {
    display: none;
}

/*Make dropdown links vertical*/
.horizontalmenubar li ul li {
    display: block;
    float: none;
}

/* Style the <a> tag nested in sub-menus */
.horizontalmenubar li ul li a {
    padding: 0 5px 0 5px;
    line-height: 25px;  
}

/* Style the hovering of the <a> tag nested in sub-menus */
.horizontalmenubar li:hover ul li a {
    background: #D6D6D6;
    color: #000000; 
}

/* Style the hovering of the <a> tag nested in sub-menus */
.horizontalmenubar li ul li a:hover {
    background: #F5F5F5;
    color: #3366FF; 
}

/*Display the dropdown on hover*/
.horizontalmenubar ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #000000;
    background: #D6D6D6;
    text-align: center;
    padding: 10px 0;
    display: none;
    font-weight: bold;
    font-size: 20px;
}

/*Hide checkbox*/
.horizontalmenubar input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
.horizontalmenubar input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    .horizontalmenubar ul {
        position: static;
        display: none;
    }

    /*Create vertical spacing*/
    .horizontalmenubar li {
        margin-bottom: 1px;
    }

    /*Make all menu links full width*/
    .horizontalmenubar ul li, li a {
        width: 100%;
    }

    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}

/* LHS div */
#div_lhs_menu {
    margin: 10px;
}

/* Main menu */
.js-css-menu {
  display: inline-block;
}

.js-css-menu, .js-css-menu ul, .js-css-menu li {
  list-style: none; 
  padding: 0; 
  margin: 0;
}

.js-css-menu a {
  text-decoration: none;
}

.js-css-menu > li {
  display: inline-block; 
  float: left;
  margin-top: 2px;
  background-color: #FFCC00;
}

.js-css-menu > li > a {
  color: #555; 
  display: block;
  padding: 10px 15px;
}

.js-css-menu > li:hover > a {
  background: #FFFFFF;
  color: #407D94;
}

/* Dropdown */
.js-css-menu > li div {
  position: absolute; 
  display: none;
  background: #D6D6D6;
}

.js-css-menu > li:hover div {
  display: block;
}

.js-css-menu > li div ul {
  float: none;
}

.js-css-menu > li div ul li {
  padding: 10px 15px;
  margin-bottom: 2px;
}

.js-css-menu > li div ul li:hover {
  background: #FFFFFF;
  color: #407D94; 
}

/* Vertical */
.js-css-menu.vertical {
  width: 180px; /* Adjust the width of the vertical menu */
}

.js-css-menu.vertical > li {
  display: block; 
  float: none; 
  position: relative;
}

.js-css-menu.vertical > li div {
  width: 150px; 
  top: 0;
  left: 181px; /* Adjust the left value according to the width of the vertical menu */
}

.js-css-menu.vertical > li div ul li:hover {
  background: #FFFFFF;
  color: #407D94;
}

.js-css-menu.vertical > li div ul li a {
  color: #555;
}

/*Responsive Styles*/
@media screen and (max-width : 760px){
    /* LHS div */
    #div_lhs_menu {
        margin: 10px 0 0 0;
    }

    /* Vertical */
    .js-css-menu.vertical {
      width: 100%; /* Adjust the width of the vertical menu */
    }
}

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}

/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #D6D6D6; 
}

th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}

td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

#overalldivcalendartable {
    display: inline-block;
    float: left;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media screen and (max-width : 760px) {

    #overalldivcalendartable {
        margin-top: 10px;
    }

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr { border: 1px solid #ccc; }

    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }

    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }

    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "First Name"; }
    td:nth-of-type(2):before { content: "Last Name"; }
    td:nth-of-type(3):before { content: "Job Title"; }
    td:nth-of-type(4):before { content: "Favorite Color"; }
    td:nth-of-type(5):before { content: "Wars of Trek?"; }
    td:nth-of-type(6):before { content: "Porn Name"; }
    td:nth-of-type(7):before { content: "Date of Birth"; }
    td:nth-of-type(8):before { content: "Dream Vacation City"; }
    td:nth-of-type(9):before { content: "GPA"; }
    td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

Answer 1

你是否正在寻找这些方面的东西：

https://jsfiddle.net/S5bKq/1255/

通过对CSS进行两次更改来实现。

/* Line 120 */
#div_lhs_menu {
    margin: 10px;
    display: inline;
}

/* Line 247 */
#overalldivcalendartable {
    display: inline-block;
    float: none;
}

Answer 2

SOLN：

我能够设置我的表格div显示在我的垂直菜单的右侧，我在父div中嵌套两个div然后为我的垂直菜单div和日历表div设置float left

.maindiv {
    width: 100%;
    background: #FFCC00;
}

/* LHS div */
.div_lhs_menu {
    margin: 10px 0 0 10px;
    float: left;
}

/*  Generic table styling */
.overalldivcalendartable {
    margin-top: 12px;
    margin-left: 10px;
    float: left;
}