Div段落与段落号码对齐并在div之外（见草图） [英] Div with paragraphs with paragraph numbers aligned and outside the div (see sketch)

问题描述

我需要在CSS中执行此操作

红色框为< div> < p>

我想让红色框右边的段落号码，数字与各自< p>

的顶部对齐我可以仅使用CSS来执行此布局吗？

到目前为止，我已经尝试过使用javascript来记录每个段落元素的位置，然后将这些数字放置在相同的y坐标中。 b

谢谢

替代文字http://img804.imageshack.us/img804/7830/sketch20100722at095202p.png

解决方案

您可以这样做：

 < 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：首先'）。html（'＃'+（i + 1））; 
 
}）; 
  

I need to do this in CSS

The red box is a <div> with several paragraphs <p>

I want to have the paragraph numbers to the right of the red box, and the paragraph numbers are aligned to the top of the respective <p>

Can I do this layout only with CSS?

I have tried so far to do this with javascript, recording the position of each paragraph element then positioning the numbers in the same y coordinate.

Thanks

alt text http://img804.imageshack.us/img804/7830/sketch20100722at095202p.png

解决方案

You could do

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

You would probably want to use classes too, inline styles for example only.

Also, a valid argument is to use an ordered list. This is easily done by wrapping those p elements in li elements, which in turn will be wrapped by an ol element. Be sure to use ol { list-style: none; }, otherwise you will get 2 sets of numbers!

As for adding the numbers, you could use server side script and a DOM parser or use JavaScript

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

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

Of course, you can also use jQuery

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

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

});

这篇关于Div段落与段落号码对齐并在div之外（见草图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！