Как выровнять div по горизонтали, используя CSS?

Question

Как выровнять div по горизонтали, используя CSS?

0

У меня проблема с моим кодом. Я создаю меню навигации для своего проекта, но я не так хорош в CSS.
У меня есть 2 тега 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/

Jerielle 06 май 2014, в 10:59

Источник

2

Что-то вроде этого? jsfiddle.net/viphalongpro/T8AQ8/3
King King 06 май 2014, в 08:17
0

Да .. Какую часть ты изменил?
Jerielle 06 май 2014, в 08:19
1

установите width:50% и float:left для вашего класса accordion
King King 06 май 2014, в 08:20
0

Благодарю. Извините, у меня мало знаний в CSS. :)
Jerielle 06 май 2014, в 08:20
2

float: left & display: inline-block поможет вам, сохранит ширину элементов
deadulya 06 май 2014, в 08:23
0

Спасибо, я попробую это. :) Куда мне нужно положить код? Это внутри .grey .accordion {...}?
Jerielle 06 май 2014, в 08:24

Показать ещё 4 комментария

Теги:

javascript

jquery

html

css

3 ответа

1

попробуй это

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

какую часть вы не понимаете??

Manjuboyz 06 май 2014, в 06:57

0

Хорошо, я попробую это .. :)
Jerielle 06 май 2014, в 08:28
0

Я сделал твой код, но я не получил последнюю часть, которую ты сказал. :(
Jerielle 06 май 2014, в 08:34

1

Как это http://jsfiddle.net/3aqxU/?

div.grey{
    float: left;
}

user3380172 06 май 2014, в 05:49

1

Вы можете добавить это: display: inline-block
user3380172 06 май 2014, в 08:26
0

Куда мне нужно положить это?
Jerielle 06 май 2014, в 08:34
0

в div.grey {...}
user3380172 06 май 2014, в 11:07

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

Ещё вопросы

Что-то вроде этого? jsfiddle.net/viphalongpro/T8AQ8/3
установите width:50% и float:left для вашего класса accordion
Благодарю. Извините, у меня мало знаний в CSS. :)
float: left & display: inline-block поможет вам, сохранит ширину элементов
Спасибо, я попробую это. :) Куда мне нужно положить код? Это внутри .grey .accordion {...}?
Я сделал твой код, но я не получил последнюю часть, которую ты сказал. :(
Вы можете добавить это: display: inline-block

ecoli · Accepted Answer · 2014-05-06T07-03-00.000Z

1

Лучший ответ

Просто добавьте это в.grey.accordion на свой css

    width:50%;
    float:left;

ecoli 06 май 2014, в 07:03

0

Да, это сейчас работает. Но вы можете мне помочь, потому что меню навигации в 50% каждый. Как мне сжать ширину навигации?
Jerielle 06 май 2014, в 08:23
0

удалите эту ширину и поплавок и попробуйте добавить этот div.grey {float: left; } это то, что вы имели ввиду ?
daR 06 май 2014, в 08:26
0

Хорошо, это работает сейчас. Но еще один вопрос, я надеюсь, вы можете мне помочь. У меня есть эта навигация. Но как я могу перекрывать меню? Ниже у меня есть фотогалерея. Я обновлю свою скрипку.
Jerielle 06 май 2014, в 08:39
0

хорошо, я постараюсь
daR 06 май 2014, в 08:42
0

Вот ссылка .. jsfiddle.net/rochellecanale/T8AQ8/6
Jerielle 06 май 2014, в 08:43
0

что вы имеете в виду под наложением меню?
daR 06 май 2014, в 08:46
0

Потому что в моем коде меню заголовка - категории1 и категории2. И если вы нажмете на эти категории, он исполнит аккордеон, который является подменю. Как я могу перекрыть подменю div с другим div ниже?
Jerielle 06 май 2014, в 08:47
1

ты пробовал это? jqueryui.com/accordion
daR 06 май 2014, в 08:53

Показать ещё 6 комментариев