javascript - 使 标签保持 div 的宽度，并在其右侧添加一个链接(以图标作为背景)

Question

这是我的 html:

<div id="cobcContainer" class='floatLeft' style="width: 50%">
    <p id="containerText">Random long text here. This text takes up two lines when it is inside it's container div (inside cobcContainer).</p>
    <a class="square bookIcon" href="/"></a>
</div>

在 CSS 中(有一个我无法访问的 style.css)

<a class="square bookIcon" href="/"></a>

有一个背景图片，它的宽度是 100px。

这里没有任何其他 CSS。当我查看网页时，容器为 50%，首先出现文本，然后链接/图标出现在其下方。如何使链接/图标出现在文本的右侧(使文本与图标/链接的左侧对齐)？我需要这是一个响应式设计，所以我在这里尝试使用百分比(除了固定宽度为 100 像素的链接/图标)。

可以使用 JQuery/JS。

注意:我不允许使用

<table>

标签也不是

display: table-cell

(这些规则是由公司制定的)。

Answer 1

p 是一个 block 级元素，所以它之后的任何元素都在它下面。并且您已经为标签定义了 100 像素的宽度，

1) 你可以这样做，

#containerText{
display:inline-block;
}

并为其定义一些宽度。

2) 或者简单的说

.square { float :左； }

它会向左浮动，旁边会出现一个标签。