Question

我的代码有问题。我正在为我的项目创建一个导航菜单，但我在CSS方面不太好我有2个div标签。每个div标签都是一个下拉式手风琴。我想要的是将第二个div放在第一个div旁边。这是我的一些代码。

HTML

<div class="grey demo-container">
    <ul class="accordion"  id="accordion-1" style="color: black">
        <li>
            <a href="#">CATEGORIES1</a>
            <ul>
                <li><a><input type="checkbox" />SHIRT</a></li>
                <li><a><input type="checkbox" />TIES</a></li>
                <li><a><input type="checkbox" />CUFFLINKS</a></li>
                <li><a><input type="checkbox" />OTHERS</a><li>
            </ul>
        </li>
        <li>
            <a href="#">COLOR</a>
            <ul>
                <li><a><input type="checkbox" />BLACK</a></li>
                <li><a><input type="checkbox" />WHITE</a></li>                  
                <li><a><input type="checkbox" />BLUE</a></li>
                <li><a><input type="checkbox" />BROWN</a></li>
                <li><a><input type="checkbox" />GREEN</a></li>
                <li><a><input type="checkbox" />RED</a></li>
            </ul>
        </li>
        <li>
            <a href="#">SIZE</a>
            <ul>
                <li><a><input type="checkbox" />37 - 81</a></li>
                <li><a><input type="checkbox" />38 - 82</a></li>
                <li><a><input type="checkbox" />39 - 83</a></li>
                <li><a><input type="checkbox" />40 - 84</a></li>
                <li><a><input type="checkbox" />41 - 85</a></li>
                <li><a><input type="checkbox" />42 - 86</a></li>
                <li><a><input type="checkbox" />43 - 87</a></li>
                <li><a><input type="checkbox" />38 - 85</a></li>
                <li><a><input type="checkbox" />39 - 87</a></li>
                <li><a><input type="checkbox" />41 - 89</a></li>
            </ul>
        </li>
        <li>
            <a href="#">STYLE</a>
            <ul>
                <li><a><input type="checkbox" />CLASSIC FIT</a></li>
                <li><a><input type="checkbox" />REGULAR FIT</a></li>
                <li><a><input type="checkbox" />SLIM FIT</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="grey demo-container" style="">
    <ul class="accordion"  id="accordion-2" style="color: black">
        <li>
            <a href="#">CATEGORIES2</a>
            <ul>
                <li><a><input type="checkbox" />SHIRT</a></li>
                <li><a><input type="checkbox" />TIES</a></li>
                <li><a><input type="checkbox" />CUFFLINKS</a></li>
                <li><a><input type="checkbox" />OTHERS</a><li>
            </ul>
        </li>
        <li>
            <a href="#">COLOR</a>
            <ul>

                <li><a><input type="checkbox" />BLACK</a></li>
                <li><a><input type="checkbox" />WHITE</a></li>                  
                <li><a><input type="checkbox" />BLUE</a></li>
                <li><a><input type="checkbox" />BROWN</a></li>
                <li><a><input type="checkbox" />GREEN</a></li>
                <li><a><input type="checkbox" />RED</a></li>
            </ul>
        </li>
        <li>
            <a href="#">SIZE</a>
            <ul>
                <li><a><input type="checkbox" />37 - 81</a></li>
                <li><a><input type="checkbox" />38 - 82</a></li>
                <li><a><input type="checkbox" />39 - 83</a></li>
                <li><a><input type="checkbox" />40 - 84</a></li>
                <li><a><input type="checkbox" />41 - 85</a></li>
                <li><a><input type="checkbox" />42 - 86</a></li>
                <li><a><input type="checkbox" />43 - 87</a></li>
                <li><a><input type="checkbox" />38 - 85</a></li>
                <li><a><input type="checkbox" />39 - 87</a></li>
                <li><a><input type="checkbox" />41 - 89</a></li>
            </ul>
        </li>
        <li>
            <a href="#">STYLE</a>
            <ul>
                <li><a><input type="checkbox" />CLASSIC FIT</a></li>
                <li><a><input type="checkbox" />REGULAR FIT</a></li>
                <li><a><input type="checkbox" />SLIM FIT</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

.grey .accordion{
    font: bold 14px Arial, sans-serif; 
    border-top: 1px solid #ccc; 
    border-right: 1px solid #ccc; 
    border-left: 1px solid #ccc;
}

.grey .accordion, .grey .accordion li {
    margin: 0; 
    padding: 0; 
    border: none;
}

.grey .accordion a {
    padding: 10px 10px 10px 50px; 
    background: #ececec; 
    text-decoration:none; 
    display: block; 
    color: #333; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #fff; 
    position: relative; 
    text-shadow: 1px 1px 1px #fff;
}

.grey .accordion a.dcjq-parent, .grey .accordion a.dcjq-parent:hover {
    background: #D7D4D4 url('./third_party/jquery-vertical-accordion-menu/css/skins/images/bg_grey.png') repeat-x 0 -1px;
}

.grey .accordion a.dcjq-parent.active {}

.grey .accordion a .dcjq-icon {
    position: absolute; 
    top: 50%; 
    left: 14px; 
    width: 34px; 
    margin-top: -17px; 
    height: 34px; 
    background: url('./third_party/jquery-vertical-accordion-menu/css/skins/images/arrow_grey_right.png') no-repeat 0 center;
}

.grey .accordion a.dcjq-parent.active .dcjq-icon {
    background: url('./third_party/jquery-vertical-accordion-menu/css/skins/images/arrow_grey_right.png') no-repeat 0 center;
}
.grey .accordion a:hover {
    background: #fff; 
    color: #990000;
}

.grey .accordion a:active{}

的jQuery

$(document).ready(function($){
    $('#accordion-1').dcAccordion({
        eventType: 'click',
        autoClose: false,
        saveState: true,
        disableLink: true,
        speed: 'fast',
        classActive: 'test',
        showCount: false
    });

    $('#accordion-2').dcAccordion({
        eventType: 'click',
        autoClose: true,
        saveState: true,
        disableLink: true,
        speed: 'slow',
        showCount: true,
        autoExpand: true,
        cookie  : 'dcjq-accordion-1',
        classExpand  : 'dcjq-current-parent'
    });
});

这是一款插件手风琴。这是我的参考：
http://www.designchemical.com/lab/demo-wordpress-vertical-accordion-menu-plugin/

这是我菜单的小提琴：
http://jsfiddle.net/rochellecanale/T8AQ8/

Answer 1

喜欢这个http://jsfiddle.net/3aqxU/？

div.grey{
    float: left;
}

Answer 2

只需将此添加到您的css上的.grey .accordion

    width:50%;
    float:left;

Answer 3

试试这个

  <div id=Main_div">
     <div id="left_div">div 1</div>
      <div id="right_div">div 2</div>
  </div>

CSS

   #Main_div
    {
      border:1px solid black;
      height:100%;
      width:100%;
     }

    #left_div
     {
       border:1px solid yellow;
       height:100%;
       width:50%;
       float:left;
     }

     #right_div
      {
        border:1px solid yellow;
       height:100%;
       margin-left:51%;
       float:right;
      }

和导航宽度

试试这个

  since left_div is 50%, assume you have a menu which needed 20% of 50% width, then place a ID to the navigation then add css to it like

  #nav_css
    {
      width:60%; //which will be 60% of 50%
      margin:5%; // margin will be present for top,bottom,left,right
      border:1px solid teal;  //which helps you in aligning its space
     }

你不明白哪一部分？

如何使用CSS水平对齐div？

3 个答案: