0

可変長のテキストを含む div があります

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

上記に 2 つのボタンを含む別のボタンを動的に追加したいのですが<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 に答える