Центр 2 divs (плавающий лев, справа) в контейнере

Question

Я пробовал несколько методов, найденных на этом веб-сайте, и ничего не помогает.

Я пытаюсь центрировать 2 divs, которые плавают влево и вправо в контейнере с шириной 100%.

CSS Сниппет:

#body-container { 
    background: none; 
    height: 100%; 
    width: 100%; 
    margin: 0 auto; 
} 

    #body-inner { 
    float: left; 
    width: 550px; 
    left: 325px; 
    margin: 0 auto; 
    background: none; 
    padding-top: 3%; 
    padding-left: 10px; 
    padding-right: 10px; 
    border-left: 1px solid #000000; 
    border-right: 1px solid #000000; 
} 

#bodybox { 
    margin: 0 auto; 
    width: 200px; 
    height: 100%; 
    right: 325px; 
    background: none; 
    font-size: 10px; 
    font-family:Arial, Helvetica, sans-serif; 
} 

Answer 1

Could this be what you're looking for? Click here...

Если я правильно понял ваш вопрос, вы пытаетесь центрировать <div>, который имеет еще 2 <div> родителей ...

код Фрагмент:

#body-container { 
    background: none; 
    height: 100%; 
    width: 100%; 
    /*margin: 0 auto;*/ 

    /* testing border and height, could be deleted */ 
    border: solid; 
    height: 500px; 
} 
#body-inner {  
    width: 550px; 
    margin: 0 auto; 
    background: none; 
    padding-top: 3%; 
    padding-left: 10px; 
    padding-right: 10px; 
    /*border-left: 1px solid #000000; 
    border-right: 1px solid #000000;*/ 

    /* testing border and height, could be deleted */ 
    border: solid; 
    height: 400px; 
} 
#bodybox { 
    margin: 0 auto; 
    width: 200px; 
    height: 100%; 
    /*right: 325px;*/ 
    background: none; 
    font-size: 10px; 
    font-family:Arial, Helvetica, sans-serif; 

    /* testing border and height, could be deleted */ 
    border: solid; 
    height: 400px; 
} 

Answer 2

Вам нужно провести некоторое исследование о том, как работают поплавки, потому что я думаю, что у вас неправильная идея. Плавающий один div влево и вправо, нет возможности их центрировать, потому что они плавают. Свойства left и right не работают, если элемент не расположен (абсолютный, фиксированный или относительный с некоторыми последствиями). Кроме того, похоже, что вы пытаетесь получить правый край #bodybox, чтобы выровнять левый край #body-inner. Это не будет работать, потому что свойство right рассчитывается с правого края экрана, а не с левого края. Кроме того, вы смешиваете размеры фиксированной коробки с шириной контейнера для жидкости. Это хорошо, если вы объясняете, что происходит с ними, когда они сталкиваются.

Если вы просто пытаетесь выровнять два <div> рядом друг с другом, по центру страницы. В этом случае inline-block, вероятно, ваш друг. Есть многочисленные последствия и пути их решения в отношении белого пространства, размеры шрифта, порядок содержания и т.д., но в основном вы могли бы сделать:

#body-container { 
    width: 100%; 
    text-align: center; 
} 
#body-inner { 
    width: 550px; 
} 
#bodybox { 
    width: 200px; 
} 

В выше, два <div> s будет сидеть рядом друг с другом до тех пор, контейнер достаточно широк, как только контейнер будет слишком маленьким, они будут отображаться один перед другим, каждый центрируется в контейнере.