inline divs fill width

Question

Я пытаюсь сделать причудливый заголовок. Вот JSFiddle, чтобы вы могли видеть, как это выглядит, прежде чем я объясню свою проблему.

Этот заголовок отлично подходит для средних/больших экранов, но проблема возникает при меньшей ширине экрана, где текст не соответствует этой ширине и перекрывается правым div.

Вот html/css (то же, что и JSFIddle). Ниже я объясню, что я хочу достичь

HTML:

<div class="header"> 
    <div class="left"></div> 
    <div class="text"> 
     <span>TITLE</span> 
    </div> 
    <div class="right"></div> 
    </div> 

CSS:

div.header{ 
    height:30px; 
    font-size:30px; 
    width:100%; 
    margin-top:100px; 
    display: block; 
    margin-bottom:30px; 
} 
div.header .left{ 
    background-color: #D82B38; 
    width:10%; 
    height:30px; 
    display: inline-block; 
    float:left; 
    border-radius:0 15px 0 0; 
} 
div.header .text{ 
    width:20%; 
    display: inline-block; 
    height:30px; 
    float:left; 
} 
div.header .right{ 
    background-color: #D82B38; 
    width:70%; 
    height:30px; 
    display: inline-block; 
    float:right; 
    border-radius: 0 0 0 15px; 
} 
div.header .text span{ 
    font-size:30px; 
    color: #D82B38; 
    position: relative; 
    top:-5px; 
    text-align:center; 
    display: block; 
    font-weight:500; 
    letter-spacing:1px; 
} 

Я хотел бы дать некоторые левые и правые Прокладки для div.text, и сделать это ширина зависит от размер текста, а затем div.left и div.right занимает их ширину в зависимости от оставшейся ширины экрана (всегда левая, намного меньшая, чем правая), вместо того, чтобы всегда иметь одинаковый процент. Я знаю, что могу играть с медиа-запросами, чтобы изменить этот процент на меньших экранах, но я знаю, что медиа-запросы не работают хорошо в Internet Explorer, и я предпочитаю их избегать.

Я пробовал несколько вещей, используя CSS, чтобы получить это, но я не могу заставить его работать. Скажите, пожалуйста, мой вопрос не совсем ясен, и я попытаюсь прояснить, что я имею в виду.

Заранее благодарен!

Eidt: Я не хочу использовать JavaScript для этого, я знаю, что должен быть какой-то способ, чтобы достичь его, используя чисто CSS

Answer 1

Вы можете использовать Flexbox

CSS

.flex-container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    align-items: center; 
    justify-content: center; 
} 

.flex-item { 
    -webkit-flex: 1 auto; 
    flex: 1 auto; 
    vertical-align: middle; 
} 

.flex-item-fixed { 
    -webkit-flex: 0 70px; 
    flex: 0 70px; 
    text-align: center; 
} 

.flex-item-fixed1 { 
    -webkit-flex: 0 10%; 
    flex: 0 10%; 
} 

.left { 
    background-color: #D82B38; 
    display: block; 
    border-radius: 0 15px 0 0; 
    height: 30px; 
} 

.right { 
    background-color: #D82B38; 
    height: 30px; 
    display: inline-block; 
    float: right; 
    border-radius: 0 0 0 15px; 
} 

DEMO HERE

Answer 2

Гибкая ширина (в процентах) являются ключом к отзывчивый веб-дизайн, но в некоторых случаях , это не путь. В этом случае, в частности, вы хотите, чтобы правая сторона заголовка реагировала, а левая сторона, включая текст, была статичной. Это позволяет избежать любых мерцаний и перемещений, а также избыточных запросов @media. Вы можете сохранить отзывчивость, используя функцию calc.

Вот что я сделал. Я дал левую сторону, а текст - ширину 350 пикселей, разделенную между ними. (100px и 250px). 350px находится в пределах ширины любого смартфона. И я сказал правильной стороне сделать это 100% - 350 пикселей. Это делает правую сторону уважением к левой стороне и соответствующим образом регулирует.

SCSS/LESS - Если вы используете LESS или SCSS/SASS, у вас будет настоящий победитель здесь, потому что вы можете сохранить эти две фиксированные ширины в переменных, а затем, если вам когда-либо понадобится изменить эти значения, LESS или SCSS/SASS будет настраивать все для вас.

Вот ваш новый CSS:

div.header{ 
    height:30px; 
    font-size:30px; 
    width:100%; 
    margin-top:100px; 
    display: block; 
    margin-bottom:30px; 
} 
div.header .left{ 
    background-color: #D82B38; 
    width:150px; 
    height:30px; 
    display: inline-block; 
    float:left; 
    border-radius:0 15px 0 0; 
} 
div.header .text{ 
    width:200px; 
    display: inline-block; 
    height:30px; 
    float:left; 
} 
div.header .right{ 
    background-color: #D82B38; 
    width: calc(100% - 350px); 
    height:30px; 
    display: inline-block; 
    float:right; 
    border-radius: 0 0 0 15px; 
} 
div.header .text span{ 
    font-size:30px; 
    color: #D82B38; 
    position: relative; 
    top:-5px; 
    text-align:center; 
    display: block; 
    font-weight:500; 
    letter-spacing:1px; 
} 

А вот как это выглядит в DEMO

EDIT

В качестве альтернативного варианта, вы можете распределить ширину и использование медиа-запросы для повторной настройки. Это то, что вы сможете использовать в старых браузерах. Чтобы центрировать текст соответственно, у вас есть 2 варианта, 1. изображен в моей DEMO после того, как я его отредактировал. используя положение слева и преобразование. И если это создает проблемы со старыми браузерами, опция 2 заключается в том, чтобы обернуть текст, а другой div и центр выравнивают его содержимое.См DEMO снова для альтернативного варианта

Answer 3

Это один работает с IE8, но использует flex, если она поддерживается браузер.

div.header{ 
 
    display: table; 
 
    height:30px; 
 
    font-size:30px; 
 
    width:100%; 
 
    margin-top:100px; 
 
    margin-bottom:30px; 
 
} 
 
div.header .left{ 
 
    display: table-cell; 
 
    background-color: #D82B38; 
 
    width:10%; 
 
    height:30px; 
 
    border-radius:0 15px 0 0; 
 
} 
 
div.header .text{ 
 
    display: table-cell; 
 
    width:20%; 
 
    height:30px; 
 
} 
 
div.header .right{ 
 
    display: table-cell; 
 
    background-color: #D82B38; 
 
    width:70%; 
 
    height:30px; 
 
    border-radius: 0 0 0 15px; 
 
} 
 
div.header .text span{ 
 
    font-size:30px; 
 
    color: #D82B38; 
 
    position: relative; 
 
    top:-5px; 
 
    text-align:center; 
 
    display: block; 
 
    font-weight:500; 
 
    letter-spacing:1px; 
 
} 
 

 
@supports (display: flex) { 
 

 
    div.header{ 
 
    display: flex; 
 
    } 
 
    div.header .left{ 
 
    display: block; 
 
    } 
 
    div.header .text{ 
 
    display: block; 
 
    min-width: 90px; 
 
    } 
 
    div.header .right{ 
 
    display: block; 
 
    } 
 
    
 
}

<div class="header"> 
 
    <div class="left"></div> 
 
    <div class="text"> 
 
     <span>TITLE</span> 
 
    </div> 
 
    <div class="right"></div> 
 
    </div>