启用div显示在另一个div的右侧

时间：2015-03-17 17:37:05

标签： html

我的问题的道歉似乎是一个涵盖的主题，但在我的截图中可以看到 enter image description here

我有一个div，即calendar_div，我似乎正在努力使其能够完全出现在灰色div的右侧，该div当前包含垂直菜单选项。

我玩了calendar_div的position属性，但没有运气。我已经完全删除了position属性。

我的计划是让我的calendar_header_div折叠/展开它下方的div，即calendar_body_div

以下是我的HTML：

    <div class="vertical_menu_bar_div">
    <div id="div_lhs_menu">

      <div id="div_user_profile">

            <img src="http://www.swim-mates.com/learning/swimmates/public/images/img_user.png" 
                 height="64" width="64" align="left"/><span id="name_main">Hi USER</span>
      </div>        

      <div id='vertical_menu'>
          <ul>
             <li><a href='#'><span>OPTION 1</span></a></li>
             <li><a href='#'><span>OPTION 2</span></a></li>
             <li><a href='#'><span>OPTION 3</span></a></li>
             <li><a href='#'><span>OPTION 4</span></a></li>
          </ul>
      </div>

    </div>

    <div class="calendar_div">

        <div class="calendar_header_div">
            <p>HEADING DIV</p>
        </div>

        <div class="calendar_body_div">
            <h1>BODY DIV</h1>
        </div>
    </div>         
<div>

以下是相关的CSS：

/* div - Vertical menu bar */
.vertical_menu_bar_div {
    background: #FFFFFF;
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
    margin: 0;
    height: 100%;
    background: #FFCC00;  /* JUST CONFIRM WIDTH != 100% */
    clear: both;  
}

/* Div - contains the LHS vertical menu */
#div_lhs_menu {
    padding: 15px 15px 15px 15px;
    background: #F8F8F3;
    display: inline-block;
    float: left;
}

/* Div user profile div */
#div_user_profile {
    clear: both;
    display: block;
    float: left;
    background: #F8F8F3;
    padding-bottom: 20px;
}

/* */
#name_main {
  padding: 20px 20px 20px 20px;
  line-height: 50px;
  background: #F8F8F3;
}

/* LHS menu basics */
#vertical_menu {
  background: #08445A;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
  font-size: 15px;
  font-family:'Trebuchet MS', Tahoma, Sans-serif;
  clear: both;
}

/* Nested ULs in LHS menu */
#vertical_menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nested LIs in LHS menu */
#vertical_menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Nested a elements in LHS menu */
#vertical_menu a {
  background: #333;
  border-bottom: 1px solid #393939;
  color: #FFFFFF;
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: normal;
}

/* Hovering WRT nested a elements in LHS menu */
#vertical_menu a:hover {
  background: #08445A;
  color: #FFFFFF;
  padding-bottom: 8px;
}

.calendar_div {
  width: auto;
  padding: 15px 15px 15px 15px;
  background: #FF0000;
}

.calendar_header_div {
  min-height: 16.42857143px;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  background: #E6B1D6;
}

.calendar_body_div {
  padding: 15px;
  background: #79EB99;
}

感谢。

1 个答案:

答案 0 :(得分：0)

这将有助于您了解自己的目标。你需要使用style =“clear：both;”修复你的div对齐。 

<style>
/* div - Vertical menu bar */
.vertical_menu_bar_div {
    background: #FFFFFF;
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
    margin: 0;
    height: 100%;
    background: #FFCC00;  /* JUST CONFIRM WIDTH != 100% */
    clear: both;
}

/* Div - contains the LHS vertical menu */
#div_lhs_menu {
    padding: 15px 15px 15px 15px;
    background: #F8F8F3;
    display: inline-block;
    float: left;
}

/* Div user profile div */
#div_user_profile {
    clear: both;
    display: block;
    float: left;
    background: #F8F8F3;
    padding-bottom: 20px;
}

/* */
#name_main {
    padding: 20px 20px 20px 20px;
    line-height: 50px;
    background: #F8F8F3;
}

/* LHS menu basics */
#vertical_menu {
    background: #08445A;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
    font-size: 15px;
    font-family:'Trebuchet MS', Tahoma, Sans-serif;
    clear: both;
}

/* Nested ULs in LHS menu */
#vertical_menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Nested LIs in LHS menu */
#vertical_menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Nested a elements in LHS menu */
#vertical_menu a {
    background: #333;
    border-bottom: 1px solid #393939;
    color: #FFFFFF;
    display: block;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight: normal;
}

/* Hovering WRT nested a elements in LHS menu */
#vertical_menu a:hover {
    background: #08445A;
    color: #FFFFFF;
    padding-bottom: 8px;
}

.calendar_div {
    width: auto;
    padding: 15px 15px 15px 15px;
    background: #FF0000;
}

.calendar_header_div {
    min-height: 16.42857143px;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    background: #E6B1D6;
}

.calendar_body_div {
    padding: 15px;
    background: #79EB99;
}
a{
    color: red;
}
</style>


<div class="horizontal_menu" style="width:100%; text-align: right; background: blue; padding: 5px;">
    <a href='#'><span>OPTION 1</span></a><a href='#'><span>OPTION 2</span></a><a href='#'><span>OPTION 3</span></a><a href='#'><span>OPTION 4</span></a>
</div>
<div class="horizontal_menu" style="width:100%; text-align: left; color: gray; text-decoration: none;">
<a href='#'><span>OPTION 1</span></a><a href='#'><span>OPTION 2</span></a><a href='#'><span>OPTION 3</span></a><a href='#'><span>OPTION 4</span></a>
</div>
<div style="clear:both"></div>
<div style="width:20%; float: left;">
<div id="div_lhs_menu">

    <div id="div_user_profile">

        <img src="http://www.swim-mates.com/learning/swimmates/public/images/img_user.png"
             height="64" width="64" align="left"/><span id="name_main">Hi USER</span>
    </div>

    <div id='vertical_menu'>
        <ul>
            <li><a href='#'><span>OPTION 1</span></a></li>
            <li><a href='#'><span>OPTION 2</span></a></li>
            <li><a href='#'><span>OPTION 3</span></a></li>
            <li><a href='#'><span>OPTION 4</span></a></li>
        </ul>
    </div>

</div>
</div>
<div style="width:80%; float: left; background: yellow; height: 200px;">
    <div style="width:100%">
    test
    </div>
</div>
<div style="width:80%; float: left; background: green; height: 200px;">
<div style="width:100%">
    test2
</div>
</div>
<div style="clear:both"></div>
<footer style="text-align: center; background: blue; padding: 7px; color: white;">
TERMS & CONDITIONS
</footer>
相关问题
最新问题