Рассчитать ширину среднего div

У меня есть 3 divsРассчитать ширину среднего div

Я использую float: слева, чтобы иметь divs в той же строке. моя проблема в том, что div1 будет иметь произвольную ширину. Div 3 будет всегда 25 пикселов с маржами слева и справа от 1., а затем средний div должен заполнить оставшееся пространство.

Что было бы лучшим способом добиться этого и все еще поддерживаться во всех браузерах?

Вот что я пробовал, но проблема в том, что% width не работает, потому что div1 всегда будет меняться по ширине.

<div class="title-div gradient"> 
    <div class="title-div-left"> 
     <p>Service 1</p> 
    </div> 
    <div class="background-line"></div> 
     <div class="title-div-right"> 
      <img src="ArrowUp.png" alt="▲"> 
     </div> 
    </div> 
</div> 

.services-wrapper .expansion-wrap .title-div { 
    height: 3.5rem; 
    line-height: 3.5rem; 
    width: 95.6rem; 
    font-size: 1.7rem; 
    color: #FFF; 
    margin-left: 3.4rem; 
    background: #6f1505; 
    /* Old browsers */ 
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZmMTUwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNDA4MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(top, #6f1505 0%, #340801 100%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f1505), color-stop(100%, #340801)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #6f1505 0%, #340801 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #6f1505 0%, #340801 100%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #6f1505 0%, #340801 100%); 
    /* IE10+ */ 
    background: linear-gradient(to bottom, #6f1505 0%, #340801 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f1505', endColorstr='#340801',GradientType=0); 


.services-wrapper .expansion-wrap .title-div .title-div-left { 
    float: left; 
} 
.services-wrapper .expansion-wrap .title-div .title-div-left p { 
    margin: 0; 
    padding-left: 1.7rem; 
    padding-right: 1rem; 
    font-size: 2rem; 
    font-weight: bold; 
    display: inline; 
} 
.services-wrapper .expansion-wrap .title-div .background-line { 
    background-image: url("../images/Line.png"); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-position: no-repeat; 
    width: 50%; 
    height: 100%; 
    float: left; 
} 
.services-wrapper .expansion-wrap .title-div .title-div-right { 
    float: left; 
    height: 3.5rem !important; 
    padding-left: 1rem; 
} 
.services-wrapper .expansion-wrap .title-div .title-div-right img { 
    margin-top: 0.5rem; 
}

источник

2015-04-04 Bojan

Опубликованная разметки, кажется, не будет завершено ... –

Добавление overflow: auto сделает ДИВ заполнить оставшееся пространство.

Демо: http://jsfiddle.net/aaL8gvhg/

источник

2015-04-04 16:02:33

Это работает, спасибо. – Bojan

Я следовал вашему примеру, но моя зеленая полоска всегда идет к новой строке. Вот пример: http://tiu.azularis.com/Services Любой шанс, который вы могли бы мне объяснить, почему? – Bojan

Да, я должен был упомянуть об этом, так как 'overflow: auto' заполняет оставшееся пространство, которое нужно поместить после правого div в html. Итак, сначала левый div, затем правый div, а затем средний div. –

Рассчитать ширину среднего div

ответ

Смежные вопросы