Каков наилучший способ реализации этой структуры?

У нас есть заголовок с двумя строками справа и слева от него.Каков наилучший способ реализации этой структуры?

Левая строка должна заполнить оставшуюся область слева от заголовка (минус небольшое поле), а правая строка должна заполнить оставшуюся область справа от заголовка.

См. Ниже иллюстрацию того, что мне нужно.

источник

2012-11-07 Maxim

Возможный дубликат http://stackoverflow.com/questions/9468923/ –

использовать <HR> элемент, чтобы нарисовать линию и поместите DIV с текстом над ним и дать ему тот же цвет фона, как страницы.

источник

2012-11-07 13:59:54

Спасибо, это было моим первым решением, но это Безразлично 'работы для меня, becouse фон страницы может быть изображением. – Maxim

Хорошо, так что не давайте цвет фона? Он должен наследовать задний цвет от своего родителя, нет? –

Как насчет двух унаследованных элементов, где у родителя есть фон с линией в нем. Детский элемент содержит белый фон и имеет небольшое дополнение. Если вы центрируете дочерний элемент в родительском элементе, вы должны получить желаемый эффект.

Это, например, должно работать:

<html> 
    <head> 
     <title></title> 
     <style type="text/css"> 
      #header { 
       width: 100%; 
       padding: 0; 
       background: url(img/line.png) repeat-x; 
      } 

      #headertext{ 
       text-align: center; 
      } 

      #headertext h1 { 
       display: inline; 
       background-color: white; 
       font-size: 150%; 
       padding: 4px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header"> 
      <div id="headertext"> 
       <h1>Heading</h1> 
      </div> 
     </div> 
    </body> 
</html>

источник

2012-11-07 14:14:41

Каков наилучший способ реализации этой структуры?

ответ

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