Question

我有一个包含可变长度文本的div

<div id="paragraph">
   blah blah blah <em>Something Important</em> more blah
</div>

我想动态地附加包含两个按钮的另一个<div id="buttons">，而<div id="buttons">应始终对齐并在包含<div id="paragraph">内显示内联。例如，它可能看起来像

This is a paragraph, and part of it are two buttons that should always align right at the end.                  [button1][button2]

如何在JavaScript或JQuery中附加<div id="buttons">部分？

Answer 1

你可以这样做，HTML：

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit atque quae officiis deserunt ea quis dolorum laudantium repudiandae suscipit eligendi consequatur amet optio fugit doloribus qui beatae officia laborum cumque!
    <a href="" class="btn">Button 1</a>
    <a href="" class="btn">Button 2</a>
</p>

和CSS：

p {
    text-align: left;
}
.btn {
    display: inline-block;
    text-align: right;
    padding: 0 5px;
    background: #b30;
    color: #fff;
    float: right;
}

Answer 2

在html中为你的第一个div和你附加的div添加一个容器（我还添加了一个附加按钮的链接）：

<a href="#" id='appender' onclick="appendBtn()">append</a>
<div id='container'>
    <div id='paragraph'>
        Lorem ipsum dolor sit amet,tofficia laborum cumqu
    </div>
</div>

CSS应该与之前的答案非常相似：

#paragraph {
  text-align: left;
  float:left;
}
.newDiv{
  display: inline-block;
  text-align: right;
  padding: 0 5px;
  float: right;
}
.btn {
  background: #b30;
  color: #fff;}

并且jQuery需要追加：

function appendBtn(){
  var myDivs =  '<div class="newDiv"><a href="#" class="btn">Button1</a></div>';
  $('#container').append(myDivs);
}

编辑：我忘了，这是一个小提琴：http://jsfiddle.net/Bpdkx/27/

在文本段落中右对齐内联div

2 个答案: