Div с абзацами с выровненными номерами абзацев и за пределами div (см. Эскиз)

Question

Мне нужно сделать это в CSS

Красное поле - <div> с несколькими абзацами <p>

Я хочу, чтобы номера абзацев были справа от красного поля, а номера абзацев выровнены по верху соответствующего <p>

Могу ли я сделать этот макет только с помощью CSS?

До сих пор я пытался сделать это с помощью javascript, записав положение каждого элемента абзаца, затем расположив числа в одной и той же координате y.

Спасибо

альтернативный текст http://img804.imageshack.us/img804/7830/sketch20100722at095202p.png

Answer 1

Вы могли бы сделать

<p style="position: relative;">
   <div style="width: 30px; position: absolute; top: 0; right: -30px">#1</div>
   Lorum ipsum...
</p>

Возможно, вы тоже захотите использовать классы, например, встроенные стили.

Также допустимым аргументом является использование упорядоченного списка. Это легко сделать, обернув элементы p в элементы li, которые, в свою очередь, будут обернуты элементом ol. Обязательно используйте ol { list-style: none; }, иначе вы получите 2 набора чисел!

Что касается добавления чисел, вы можете использовать серверный скрипт и DOM-парсер или использовать JavaScript

var p = document.getElementById('content').getElementsByTagName('p');

for (var i = 0; i < p.length; i++) {
    p[i].getElementsByTagName('div')[0].innerHtml = '#' + (i + 1);
}

Конечно, вы также можете использовать jQuery

$('#content p').each(function(i) {

    $(this).find('div:first').html('#' + (i + 1));

});

Answer 2

Семантически это должно быть <ol>.

В любом случае что-то подобное может работать:

ol 
{ 
  border-top: 1px solid red; 
  border-bottom: 1px solid red;
  border-left: 1px solid red; 
}
p { border-right: 1px solid red; padding: 10px 0; }
span.number { vertical-align: top; float: right; }
.clear { clear: both; }

<ol>
  <li>
    <p>
      content
    </p>
    <div class="number">
      #1
    </div>
    <div class="clear"><div>
  </li>
</ol>

Answer 3

Этот ответ основан на ответе Графена (он прав в том, что следует использовать OL, так как он семантически корректен).Для добавления нумерации используется jQuery.

jQuery

$(document).ready(function(){
  $("ol li").each(function(i){
    $(this).prepend('<span class="number">#'+(i+1)+'</span> ');  // Append the number (using prepend, but the CSS will put the number after the box
  });
});

CSS

ol {
  list-style: none;
  border: 1px solid red;
  overflow: auto; 
  width: 500px;
}

li {
  margin: 0.75em 0.75em 0.75em -28px;
}

.number {
  position:absolute;
  left: 560px;
}

HTML

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt nisl a purus mollis tempor. Donec dapibus blandit purus at semper. Aliquam sit amet dolor at sapien gravida pharetra rutrum at libero.</li>
</ol>

Answer 4

Вот что я бы сделал:

<div>
  <p>
     content 1
     <span>#1</span>
  </p>
  <p>
     content 2
     <span>#2</span>
  </p>
  <p>
     content 3
     <span>#3</span>
  </p>
</div>

и CSS выглядит так:

div {
    padding:10px;
    border:1px solid red;
    width:500px;
}
p { 
    position:relative; 
}
p span {
    font-size:30px;
    position:absolute;
    top:0;
    right:-60px;
}

, а теперь просто поиграйте с позиционированием.