Центрирование двух разделов динамической ширины на той же линии и

Question

Хорошо, прошу прощения, если это повторение, но я не мог найти никаких рабочих ответов нигде.

Я хочу иметь два divs (ширина 50% каждый) бок о бок ... так что левый и правый - внутри содержимого div (see photo below).

Я хочу, чтобы у них была минимальная ширина 300px, и когда страница становится меньше 600px (это когда оба divs достигают своих минимумов), я хочу, чтобы divs обертывались .. так один поверх другого.

Я попытался сделать это здесь: fiddle, но у меня проблемы.

Вот именно то, что я хочу:

Answer 1

вы делаете вещи трудно для себя! Это можно сделать быстро и легко с помощью inline-block. Приятного JSfiddle.

Позволяет объяснить код:

.wrapper 
{ 
    text-align: center; /* specifies that the inline-blocks (which are treated 
     like text here) will be centered. */ 

    font-size: 0; /* Explained later */ 
    max-width: 1000px; /* Your desired max-width */ 
    position: relative; /* These two lines center your wrapper in the page. */ 
    margin: 0 auto; 
} 

Теперь для внутренних 50% элементов:

.left, .right{ 
    display: inline-block; /* This will treat these divs like a text element. 
     This will work with the parent's "text-align: center" to center the element. */ 

    min-width: 300px; 
    width: 50%; 
    font-size: 16px; /* Explained below */ 
    vertical-align: text-top; /* Explained below */ 
} 

Вы можете быть удивлены, почему font-size включен. Это связано с тем, что с этим методом возникает небольшая причуда - если размер шрифта поддерживается по умолчанию, у div будет досадный разрыв между ними, который не может быть устранен с использованием поля.

Однако добавление font-size: 0; к родительскому элементу устраняет этот пробел. Это странно, и тогда вам нужно указать размер шрифта для ваших дочерних элементов, но это стоит того, чтобы простота использования.

Но все еще есть проблема - синий элемент сдвинут вниз и не заподлицо вверху. Это можно исправить с помощью vertical-align: text-top; Это позволит убедиться, что все элементы Div выровнены по вершинам, поэтому они лежат в более приятном узоре. Это еще одна небольшая причуда, которую следует помнить при использовании встроенных блоков. Я знаю, что кажется, что многие вещи исправить только для чего-то такого простого, но по сравнению с вашими другими вариантами, используя inline-block, это самый чистый и простой способ обойти это. (Хотя, если вы предпочитаете, jshanley предлагает очень хорошую альтернативу с помощью поплавковых элементов)

Кроме того, поскольку эти дети в настоящее время рассматривается как текст, они будут автоматически изменить себя, когда окно становится слишком мало! Никаких медиа-запросов не требуется. Ура.

Удачи.

Answer 2

left и right могут иметь одинаковый макет, поэтому я добавляю класс block.
Чтобы использовать float:left и width:50%, он должен работать.

http://jsfiddle.net/emn178/mzbku/7/

добавить медиа-запрос, он должен быть, что вы хотите.
Но вам нужно рассчитать, как установить размер.

Answer 3

Вместо того, чтобы использовать встроенный блок, который вызывает некоторые проклейки причуды, вы можете использовать блочные элементы, и плавать как .left и .right влево, давая каждый ширин 50%.

Затем, чтобы сделать их стек, вам нужно немного вычислить. Так как вы определили, что обертка 80% ширины страницы, и точка останова для содержания в 600px (каждый элемент 300px) контрольная точка страницы, была бы на 750px поскольку 80% из 750 600.

Вы можете сделать медиа-запрос, который будет применять стили только тогда, когда ширина страницы меньше 750px и установите .left и .right на ширину 100%, чтобы сделать их стек.

@media only screen and (max-width: 750px) { 
    .left, .right { 
     width: 100%; 
    } 
} 

Это очень просто реализовать, и дает хороший результат, вот fiddle.

Answer 4

Я думаю, что ответы Оба @jshanley и @ emn178 в сделать трюк, но я хочу отметить что-то:

дисплей: встроенный блок; css свойство не работает с float: right или float: left, так как когда вы используете свойство float, оно ВСЕГДА автоматически устанавливает свойство отображения для блокировки.

Поскольку вы делаете это:

.right{ 
    min-width:100px; 
    background-color:purple; 
    height:100%; 
    margin-left:50%; 
    display:inline-block; 
} 

дисплей: встроенный блок; Свойство ничего не делает.