0

我有一个包含可变长度文本的 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]

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

4

2 回答 2

2

你可以这样做，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;
}
于 2013-01-10T10:12:20.077 回答
0

在 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/

于 2013-01-10T10:59:12.740 回答