2

block_insideというdivがあります。その中には、text_blockとtext_block_buttonの2つのdivがあります。text_block_buttonのButtonクラスは、jquery.text_blockを使用してクラス（段落）について表示および非表示にし、text_block_buttondivはインラインです。ボタンをクリックすると、divが展開され、「about」クラスが表示されます。クラスについて表示および非表示にしながら、ボタンクラスをblock_insidedivの下部に配置するにはどうすればよいですか。これがhtmlコードです：

<div class="block_inside">
  <div class="text_block">                   
    <p>Here is paragraph.  </p>
    <p class="about">Here is hidden paragraph.(more than 500 words.) </p>
  </div>
  <div class="text_block_button">
     <a class="button">About</a>
  </div>
</div>

これがcssコードです：

.block_inside {
   display:block;
   border:1px solid #FFFFFF;
   overflow:auto;
   padding-left: 10px;
}
.text_block {
   float:left;
   width:600px;
   margin-left:30px;
   padding: 0px;
}
.text_block_button {
   float: right;
   padding-right: 15px;
   padding-bottom: 5px;
   padding-left: 5px;
}
a.button {
   padding:5px 10px 5px 10px;
   color: #ffffff;
   text-decoration: none;
   border:1px solid #32312f;
   text-transform:uppercase;
   font-size:9px;
   line-height:25px;    
}

これがjqueryコードです：

<script>
$(document).ready(function() {
$('p.about').hide();    
$('a.button').click(function() {
    $('p.about').toggle();
});

});
</script>
4

1 に答える 1

3

デモjsBin

.block_inside {
    position:relative; /*added*/
    /* ... */
}

.text_block_button {
    position:absolute;    /*added*/
    bottom:10px;          /*added*/
    right:10px;           /*added*/
    /* ... */
}
于 2012-05-13T20:09:46.390 に答える