3 
---------------------------------------------
|   text                                    |
|   text                                    |
|   text                                    |
|   text                                    |
|   text                                    |
|   text                   -------  ------- |
|   textttttttttttttt     |Button1||Button2||
|                          -------  ------- |
---------------------------------------------

所以我希望 Button1 始终位于 Button2 的左侧，而 Button2 始终位于 div 的右下角。我怎样才能做到这一点？顺便说一句，目前，我的代码在“texttttttttttttt”行中有两个按钮部分。我没有为文本和按钮制作单独的 div/spans。

4

3 回答 3

1

你想要这样的东西吗..？

jsFiddle 在这里。

我只是做了显而易见的事情，并浮动了元素。

.paragraph {
    float:left;
}
.buttons {
    float:right;
}
于 2013-09-04T00:25:39.363 回答
1

使用绝对定位

如果您将容器设置为相对定位，那么您可以在必要时绝对定位子元素。让您更好地控制它们相对于容器的位置。这通常用于创建一个 div 扩展以匹配它所在容器的高度；例如，.right-column-full { position:absolute; top:10px; bottom:10px; right:5px; }

为什么要使用绝对定位？

Josh C 的解决方案中的主要缺陷是，如果您添加额外的文本或更改容器 div 的高度（以及其他更改），您的按钮将保持原位，除非您还调整它们的 margin-top 属性。

对于可能更简单且更易于管理的解决方案，您可以执行以下操作：

HTML

<div class="infoblock-container">
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>texttttttttttttttttttttttttttttttt</p>
    <input type="button" class="button-one" value="Button-One">
    <input type="button" class="button-two" value="Button-Two">
</div>

CSS

.infoblock-container {position:relative;}
.button-one {position:absolute; right:5px; bottom:5px; width:80px; margin-right:84px;}
.button-two {position:absolute; right:5px; bottom:5px; width:80px;}

演示

与 Josh C 的解决方案不同，这将始终将按钮保留在右下角，并且始终与边缘保持 5px（或您指定的任何值）的距离。通过指定宽度和边距，我们很容易给最右边的按钮足够的空间加上 4px。

于 2013-09-04T01:02:21.373 回答
1

我认为这两种方法都需要在这里完成。

首先，为了让按钮在角落里用文本换行进行布局，您必须将它们包装在一个 div 中

<div class="buttons">
    <button class="button-left">Text</button>
    <button class="button-left">Text</button>
</div>

和你的 CSS

.buttons {
    position:absolute; 
    right:5px; 
    bottom:5px;
    width: 100px;
}

.button-left {
    float:left;
    width:45px;
    margin: 0 2px
}

.button-right {
    float:right;
    width:45px;
    margin:0 2px;
}

`

于 2013-09-04T01:20:00.513 回答