Javascript 将div与这些div外部的p对齐

我有一个里面有一些p的div，我想把按钮放在一些p的旁边。只有一些按钮显示，我将通过Javascript控制哪些按钮。通常，我会将每个p放在一个不同的包装器div中，其中还包含相应的按钮。但是我想在所有的p周围有一个背景图像，所以我需要把所有的p放在同一个div中，并且不能对每个p有单独的div。我也不希望背景出现在按钮周围，因为按钮是圆形的。如何将按钮与p对齐？我应该使用jQuery获取每个p的顶部属性并将它们传递给按钮吗

JS小提琴：

HTML:

实际页数： 编辑：显示我所需内容的图像：

---

我查看了您的页面，您只需更改方法即可

<div class="content">
        <ol class="p-wrapper">
            <!--there is a background image here-->
            <li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
            <li>lorem ipsum lorem ipsum</li>
            <li>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</li>
            <li>lorem ipsum lorem ipsum</li>

        </ol>
    </div>

---

然后，您需要进行一些调整以适应您的口味，但这将按照您的意愿工作

您完全可以将带有白色背景的

放置在公共

中的

旁边，如下所示：

.content
{
    width:1100px;
    margin-top:60px;
    margin-left: 200px;
    background:url('bg/old-paper-texture.jpg') repeat-y;
    background-size:700px; /* your current .bible width */  
}
.bible
{
    padding-top:15px;
    padding-left:25px;
    font-size:20pt;
    margin:0px 0px 10px;
    width:700px;
    color: white;
    /*box-shadow:-30px 30px 30px #888888;*/
}
.bible li{position:relative; width:800px} /*700 px + button width, change at will */
.bibletext{width:700px}
.but{width:100px; position:absolute; top:0; right:0;}

  <div class="demo">
      <p>lorem ipsum lorem ipsum</p>
      <div class="right">
           <button>Button</button>
      </div>
   </div>

---

你说的“将按钮与p元素对齐”是什么意思？@manasson我的意思是，根据段落的大小，它可能跨越多行。我希望每个按钮都出现在相应段落的旁边，而不是上面或下面。你说“我也不希望背景出现在按钮后面”是什么意思？按钮不是透明的。@TJ我是说在按钮周围。我希望背景只应用于文本，而不是按钮。按钮将是圆形的，我希望包含按钮的正方形是白色的。@TJ我添加了一个图像，显示了我试图完成的任务。谢谢你的耐心和帮助。所以，为了添加一个按钮，我把div放在了li中？如果我这样做，背景图像不会也覆盖按钮吗？是的，你将按钮放在

li

中，而不是，背景不会覆盖任何东西，因为它将在

li

下一层。对不起，我选错词了。我的意思是背景也会出现在按钮后面。我希望背景只出现在文本后面。我添加了一个图像，显示我正在努力完成的任务。谢谢你的耐心和帮助。这确实解决了问题，但也创造了其他问题。例如，页面底部有一个“reference”div。我放置了overflow:hidden以使content div包含引用div（我不能很好地理解这一点，因为overflow:hidden应该使内容消失，而不是拉伸外部div，但这是另一个问题）。通过去掉overflow:hidden代码，引用div不包括在后台。这是一个小问题，因为我可以修改设计，让它留在外面。第二个问题是重复。（下一评论）

<div class="content">
            <ol class="bible">
                <!--there is a background image here-->
                <li><div class="bibletext">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div> <div class="but"><button></button></div></li>
                <li><div class="bibletext">lorem ipsum lorem ipsum</div></li>
                <li><div class="bibletext">lorem ipsum lorem ipsum</div><div class="but"><button></button></div></li>

            </ol>
        </div>

.content
{
    width:1100px;
    margin-top:60px;
    margin-left: 200px;
    background:url('bg/old-paper-texture.jpg') repeat-y;
    background-size:700px; /* your current .bible width */  
}
.bible
{
    padding-top:15px;
    padding-left:25px;
    font-size:20pt;
    margin:0px 0px 10px;
    width:700px;
    color: white;
    /*box-shadow:-30px 30px 30px #888888;*/
}
.bible li{position:relative; width:800px} /*700 px + button width, change at will */
.bibletext{width:700px}
.but{width:100px; position:absolute; top:0; right:0;}

  <div class="demo">
      <p>lorem ipsum lorem ipsum</p>
      <div class="right">
           <button>Button</button>
      </div>
   </div>

p {
  margin-right:200px;
}
.demo {
  position:relative;
}
.right {
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:200px;
  background:white;
}
.demo button {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100px;
  height:20px;
  margin:auto;
}