How to position text at end of previous block of text?

We are using a CMS which limits my ability to edit the HTML. I have a paragraph of text, followed by a link:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore.

Click here

Our designer would prefer to have the "Click here" link appear directly at the end of the paragraph of text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore. Click here

Is it possible to position the link with CSS such that it always appears at the end of the preceding paragraph? Here is the HTML produced by our CMS:

<div class="item summary">
    <div class="content">
        <p>
            Lorem ipsum...
        </p>
    </div>
</div>  
<div class="item link">
    <div class="content">
        <a href="http://www.example.com">Click here</a>
    </div>
</div>

---

For this to work, basically all your elements (div, p, a) need to be inline or inline-block elements.

http://jsfiddle.net/mkeyh93f/

div.item{
    display: inline;
}

div.item p, div.item div, div.item a{
    display: inline;
}

Just make sure you also don't have any default padding and margins on your elements. I would also suggest wrapping it all up in a div or article container with display: block;

---

You can set

float: right;

in your item link. Or use a table layout.

Tip: Set no blanks in your css class names ("itemLink").

---

If possible change the div to span or in the css, add

.item, .item.content, .item.content p,
.item.summary .item.link {display: inline;}
.item.summary item.link .content {display: inline;}

This would change the behavior of the div element.m which is sort of anti-intuitive. DIVs are semantically divisions and so, making a div act like a span is not recommended. Use it only as a last resort

链接地址: http://www.djcxy.com/p/75990.html

上一篇: 创建段落布局

下一篇: 如何在前面的文本块末尾放置文本？