Question

我需要在CSS中执行此操作

红色框是<div>，其中有几段<p>

我希望段落编号位于红色框的右侧，段落编号与相应<p>

的顶部对齐

我可以只使用CSS进行此布局吗？

到目前为止，我已尝试使用javascript执行此操作，记录每个段落元素的位置，然后将数字定位在相同的y坐标中。

由于

alt text 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

这就是我要做的事情：

<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;
}

现在只是玩定位。

Answer 4

这个答案建立在Graphain的答案之上（他应该使用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>

带有段落编号的段落与div之外的段落（参见草图）

4 个答案: