Question

我有一个内部有一些p的div，并且想要将按钮放在某些p的侧面。只显示一些按钮，我将通过Javascript控制哪些按钮。通常，我会将每个p放在一个不同的包装器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/ 编辑：显示我需要的图片： desired output

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

然后你需要做一些调整以适应你的口味，但这可以按照你想要的方式工作

Answer 2

您绝对可以将<div>的白色背景与<button>的{{1}}放在一个公共<p>旁边，如下所示：

<div>

<div class="demo"> <p>lorem ipsum lorem ipsum</p> <div class="right"> <button>Button</button> </div> </div>默认是透明的，因此拥有公共父<div>不会隐藏包装器的背景。

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

CSS：

<div>

Demo

将div与p外部的div对齐

2 个答案: