CSS: 3 div - автоматическое изменение размера 2 внешних div в зависимости от ширины внутреннего div / текста - PullRequest
Новая
       1

CSS: 3 div - автоматическое изменение размера 2 внешних div в зависимости от ширины внутреннего div / текста

3 голосов
/ 30 ноября 2010

Моя проблема лучше всего обозначена этой схемой / изображением, где показано, как я хочу, чтобы она выглядела:

http://i51.tinypic.com/28thuh0.jpg http://i51.tinypic.com/28thuh0.jpg!

У меня есть фоновое изображение и 2 div для текста поверх него (заголовок и вступительный текст). У меня также есть 2 деления по обе стороны от заголовка - это для белых горизонтальных полос.

Моя проблема заключается в том, что заголовок можно изменить в CMS, и я хочу, чтобы горизонтальные белые полосы автоматически заполняли пространство слева и справа от него, независимо от ширины заголовка.

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

Вот мой HTML: 

<div id="masthead">
<div id="headline-container">   
    <div id="left-stripe">&nbsp;</div><div id="headline">{headline}</div><div id="right-stripe">&nbsp;</div>
</div>
<div class="clear-both">&nbsp;</div>
<div id="intro-text">{intro_text}</div>
</div>

А вот мой CSS - игнорируйте ширину, указанную для левой и правой полос - они просто заполнители: 

#masthead {
    height: 260px;
}

div#headline-container {
    width:960px;
    padding:none;
}
div#left-stripe{
    float: left;
    background-color:#fff;
    height: 3px;
    width:500px;
    display: inline;
}
div#right-stripe{
    float: right;
    background-color:#fff;
    height: 3px;
    width:100px;
    display: inline;
}
div#headline {
    text-align:right;
    color: #fff;
    font-size: 200%;
    float: left;
    display: inline;    
}
div#intro-text {
    text-align: left;
    float: right;
    width: 300px;
    color: #fff;
}

Идеи? Пожалуйста, дайте мне знать, если я могу предоставить более подробную информацию.

Ответы [ 3 ]

3 голосов
/ 30 ноября 2010

Я слишком занят, чтобы на самом деле проверить это, но это может дать вам некоторое направление. Я не уверен, какой именно эффект вы пытаетесь достичь (см. комментарий о том, как найти демо-версию, сделанную кем-то).

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

Это решение CSS МОЖЕТ работать ... без обещаний.

Разметка 

<div class="container">
  <div class="headline-container">
   <div class="left-stripe"></div>
   <div class="headline">Headline goes here</div>
   <div class="right-stripe></div>
  </div>
  <div class="content"></div>
</div>

CSS 

//static width for right stripe
.right-stripe { width: 20px; }
.headline { width: auto; }
.left-stripe { width: auto; }

Использование javascript сделало бы это действительно простым, хотя ... вот как я могу это сделать с jQuery . Опять же, я бы сделал правую полосу статической ширины для достижения этого эффекта.

(такая же разметка ...)

..

JS 

var totalWidth = $("#container").width();
var leftWidth = totalWidth - ($("headline").width() + $("right-stripe").width());
$("left-stripe").width(leftWidth);
0 голосов
/ 30 ноября 2010

Вы можете сделать это динамически, например, с помощью jQuery.Вы берете полную ширину 3 делений, уменьшаете размер внутреннего делителя и динамически назначаете ширину 2 внешних делителей, в которых полоса должна повторяться по горизонтали.

В основном вам потребуется: $("#whole-div").width() - $("#inner-div").width()для общей ширины внешнего div.Затем, в зависимости от вашего положения внутреннего div, вы назначаете значения для внешнего div.Например: весь div имеет 1000px, внутренний div имеет 200px, а внутренний div расположен на 600px слева.Затем вы назначите 600 пикселей для левого элемента ($("#whole-div").width() - $("#inner-div").css('left')) и 200 пикселей для правого элемента ($("#whole-div").width() - $("#inner-div").css('left') - $("#inner-div").width()).Конечно, вы затем установите свойство background-repeat на внешнем элементе div, чтобы изображение повторялось.

Надеюсь, это поможет!

0 голосов
/ 30 ноября 2010

ОБНОВЛЕНИЕ Только жидкий раствор CSS: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/1/

он использует одно и то же фоновое изображение дважды, на #masthead и на #headline-container.кроме контейнера заголовка ton, фон смещен, чтобы соответствовать его левой позиции относительно его родительского элемента.тогда нам нужен только один div.line за ним, который покрывается фоновым изображением под заголовком и копируется, создавая иллюзию цельного изображения.

Вы имеете в виду, как это ?: http://jsfiddle.net/SebastianPataneMasuelli/XnvYw/

...