将 div 与这些 div 外部的 p 对齐答案

【问题标题】：Align divs with p external to those divs将 div 与这些 div 外部的 p 对齐
【发布时间】：2014-10-14 13:28:26
【问题描述】：

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

JS 小提琴：http://jsfiddle.net/bw22yht1/

HTML：

<body>
    <div class="content">
        <div class="p-wrapper">
            <!--there is a background image here-->
            <p>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</p>
            <p>lorem ipsum lorem ipsum</p>
            <p>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</p>
            <p>lorem ipsum lorem ipsum</p>

        </div>
    </div>
</body>

CSS：

.content
{
    width:1100px;
    margin-top:60px;
    margin-left: 200px; 
}
.p-wrapper
{
    background-image:url('bg/old-paper-texture.jpg');
    background-size:cover;
    padding-top:15px;
    padding-left:25px;
    font-size:20pt;
    margin:0px 0px 10px;
    width:700px;
}

实际页面：http://cin.ufpe.br/~rvcam/map/ 编辑： 一张显示我需要的图片：

【问题讨论】：

“将按钮与 p 元素对齐”是什么意思？
@manassorn 我的意思是，根据段落的大小，它可能跨越多行。我希望每个按钮都显示在其相应段落的旁边，而不是上方或下方。
什么意思“我也不希望背景出现在按钮后面”？按钮不透明。
@TJ 我的意思是在他们身边。我希望背景只应用于文本，而不是按钮。按钮是圆形的，我希望包含按钮的正方形是白色的。
@TJ 我添加了一张图片，展示了我想要完成的工作。感谢您的耐心和帮助。

标签： javascript jquery html css alignment

【解决方案1】：

我看了你的页面，你只需要改变你的方法

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

您将拥有所需的东西，并且不需要额外的跨度，您将拥有自动编号

编辑：请参阅下面的代码以满足您的需求。

HTML 大部分保持不变，只需将 <ol class="p-wrapper"> 更改为 <ol class="bible"> 并添加按钮

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

CSS如下：

.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 放在 li 里面？如果我这样做，背景图像不会也覆盖按钮吗？
是的，你把按钮放在li里面，不，背景不会覆盖任何东西，因为它比li低一层
对不起，我选词不当。我的意思是说背景也会出现在按钮后面。我希望背景只出现在文本后面。
我添加了一张图片，展示了我想要完成的工作。感谢您的耐心和帮助。
这确实解决了问题，但创造了其他问题。例如，页面底部有一个“参考”div。我放了 overflow:hidden 使内容 div 包含引用一个（我不太理解，因为 overflow:hidden 应该使东西消失，而不是拉伸外部 div，但这是另一个问题）。通过取出overflow:hidden代码，后台不包含引用div。这是一个小问题，因为我可以修改设计以将其留在外面。第二个问题是repeat-y。（下一条评论）

【解决方案2】：

您绝对可以将包含<button> 的白色背景的<div> 与<p> 放在共同的<div> 中，如下所示：

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

<div> 默认情况下是透明的，因此拥有一个共同的父 <div> 不会隐藏包装器的背景。

然后您可以使用以下方法对齐按钮：

CSS：

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

Demo

【讨论】：