更改单个div的高度(Flexbox)

时间:2018-06-01 13:12:32

标签: jquery html css flexbox

我有一个问题,我做了一个带有标题和编号的课程显示,有一个小图标“+”,如果你点击它显示相关课程的内容,还有一个“+”,它显示问题。

这一切都有效,除了我的课程是两个对齐的,如果课程1的div变得更大,那么2级的div也是如此,但我不希望第二个更改:(好吧,这是例子:)抱歉长度!

$('.detailscours').hide()
$('.detailsquestion').hide()

var bonrep= 'reponse4';
var bonrep= '#'+bonrep + '1';
$(bonrep).css("border","1px solid green");

  $(".imagesuppr").click(function(){
    var r = confirm("Etes-vous sur de vouloir supprimer cette question?");
if (r == true) {
    var valeur= $(this).attr('value');
    var formcour="elle"+valeur;
    document.getElementById(formcour).submit();
} 
  });

   $(".imagesedit").click(function(){
   
    var valeur= $(this).attr('value');
    var formcour="formedit"+valeur;
    document.getElementById(formcour).submit();

  });

  $("#bouttonverrou").click(function(){
    document.getElementById("deverquest").submit();
  })


  $(".detailscoursplus").click(function(){
    value = $(this).attr('value')
    displaycours="#detailscours"+ value;
    $(displaycours).toggle("slow")
  
  })

   $(".detailsquestionplus").click(function(){
    value = $(this).attr('value')
    displayquestion="#detailsquestion"+ value;
    $(displayquestion).toggle("slow")
  
  })
.question{border:1px solid;
width: 40%;
text-align: center;
margin:2% auto;
}
.groupe{display: flex;
  flex-wrap: wrap;
  justify-content: center;

}
table{
  text-align: center;
  width: 100%;
}

#save{
  display:none;
  
}
#accueil{margin-left:1% !important;}

#listequestion{
	display: flex;
	flex-wrap: wrap;
}
.imagesuppr
{
	float:right;
	width:32px;
	cursor:pointer;

}

.imagesedit
{
	float:right;
	width:32px;
	cursor:pointer;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="listequestion">



          	<div class="question">

          <form method="post" id="elle1" name="coucou" action="./traitement.php">
          <input type="hidden" name="courssuppr" value="1">
          <br>
          <h2>Cours 1</h2>



          <p>bqfqfdbdfqb </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="1">
         <div class="detailscours" id="detailscours1" style="display: block;">
          <p>
          </p><p><img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:180px; width:280px"></p>

<p>mon texte par défautqdfbqdfbqfdb</p>

<p>qdfbqdfbqdf</p>

<p>bqdfbqdfbqdfb</p>

<p>qdfbqfdbqdfbqdfb</p>

<p>&nbsp;</p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="1">
          <div class="detailsquestion" id="detailsquestion1" style="display: block;">
            

                              <h2>Question : </h2>
                <p>nouvelle question </p><br>

          <table>
            <tbody><tr>
              <td id="reponse11">
                reponse la 1    
              </td>
              <td id="reponse21">
                et la 2 
              </td>
            </tr>
            <tr>
              <td id="reponse31">
                ici la 3              </td>
              <td id="reponse41" style="border: 1px solid green;">
                la bonne reponse 4 
              </td>
            </tr>
          </tbody></table>



          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit1" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="1">
        </form>


       
        
           


          	<div class="question">

          <form method="post" id="elle2" name="coucou" action="./traitement.php">
         
          <input type="hidden" name="courssuppr" value="2">
          <br>
          <h2>Cours 2</h2>



          <p>rvrvervre </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="2">
         <div class="detailscours" id="detailscours2" style="display: none;">
          <p>
          </p><p>mon texte par défautervvqervqerervervq</p>

<p>ervqervqerveqrv</p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="2">
          <div class="detailsquestion" id="detailsquestion2" style="display: none;">
            

                              <h2>Question : </h2>
                <p>gwdh </p><br>

          <table>
            <tbody><tr>
              <td id="reponse12">
                fdhwfdhwdh    
              </td>
              <td id="reponse22">
                wdfhwdfh 
              </td>
            </tr>
            <tr>
              <td id="reponse32">
                wdhwdfh              </td>
              <td id="reponse42" style="border: 1px solid green;">
                wdhwdfh
              </td>
            </tr>
          </tbody></table>

        

          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit2" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="2">
        </form>


       
        
           


          	<div class="question">

          <form method="post" id="elle3" name="coucou" action="./traitement.php">
          
          <input type="hidden" name="courssuppr" value="3">
          <br>
          <h2>Cours 3</h2>



          <p>bqfqfdbdfqb </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="3">
         <div class="detailscours" id="detailscours3" style="display: none;">
          <p>
          </p><p><img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:180px; width:280px"></p>

<p>mon texte par défautqdfbqdfbqfdb</p>

<p>qdfbqdfbqdf</p>

<p>bqdfbqdfbqdfb</p>

<p>qdfbqfdbqdfbqdfb</p>

<p>&nbsp;</p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="3">
          <div class="detailsquestion" id="detailsquestion3" style="display: none;">
            

                              <h2>Question : </h2>
                <p>gbgbgb </p><br>

          <table>
            <tbody><tr>
              <td id="reponse13" style="border: 1px solid green;">
                sfgbsfgbsfg    
              </td>
              <td id="reponse23">
                sgfbsfgb 
              </td>
            </tr>
            <tr>
              <td id="reponse33">
                sfgbsgfb              </td>
              <td id="reponse43">
                sfgbsgfbfsgb
              </td>
            </tr>
          </tbody></table>

         

          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit3" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="3">
        </form>


       
        
           


          	<div class="question">

          <form method="post" id="elle4" name="coucou" action="./traitement.php">
          
          <input type="hidden" name="courssuppr" value="4">
          <br>
          <h2>Cours 4</h2>



          <p>hello </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="4">
         <div class="detailscours" id="detailscours4" style="display: none;">
          <p>
          </p><p>mon texte par défapremier cours</p>

<p><img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:321px; width:500px"></p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="4">
          <div class="detailsquestion" id="detailsquestion4" style="display: none;">
            

                              <h2>Question : </h2>
                <p>vaerva </p><br>

          <table>
            <tbody><tr>
              <td id="reponse14">
                avaraervr    
              </td>
              <td id="reponse24">
                vrveaevae 
              </td>
            </tr>
            <tr>
              <td id="reponse34">
                vaevaerv              </td>
              <td id="reponse44" style="border: 1px solid green;">
                aevaervaev
              </td>
            </tr>
          </tbody></table>



          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit4" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="4">
        </form>


       
        
           


          	<div class="question">

          <form method="post" id="elle5" name="coucou" action="./traitement.php">
          
          <input type="hidden" name="courssuppr" value="5">
          <br>
          <h2>Cours 5</h2>



          <p>dbsfbf </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="5">
         <div class="detailscours" id="detailscours5" style="display: none;">
          <p>
          </p><p>mon texte par défautrgqerv</p>

<p>revervrev</p>

<p>rvaervaervver</p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="5">
          <div class="detailsquestion" id="detailsquestion5" style="display: none;">
            

                              <h2>Question : </h2>
                <p>qdfvqdvqd </p><br>

          <table>
            <tbody><tr>
              <td id="reponse15">
                vqfdvqqfdvq    
              </td>
              <td id="reponse25">
                vqdvqdvqfd 
              </td>
            </tr>
            <tr>
              <td id="reponse35" style="border: 1px solid green;">
                qdfvqfdv              </td>
              <td id="reponse45">
                fvqdvqdvqdvqdfv
              </td>
            </tr>
          </tbody></table>

         
          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit5" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="5">
        </form>


       
        
           


          	<div class="question">

          <form method="post" id="elle6" name="coucou" action="./traitement.php">
          <img class="imagesuppr" src="../images/delete.PNG" value="6">
          <img class="imagesedit" src="../images/edit.PNG" value="6">
          <input type="hidden" name="courssuppr" value="6">
          <br>
          <h2>Cours 6</h2>



          <p>rvrvervre </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="6">
         <div class="detailscours" id="detailscours6" style="display: none;">
          <p>
          </p><p>mon texte par défautervvqervqerervervq</p>

          <p>ervqervqerveqrv</p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="6">
          <div class="detailsquestion" id="detailsquestion6" style="display: none;">
            

                              <h2>Question : </h2>
                <p>qdfvqdfv </p><br>

          <table>
            <tbody><tr>
              <td id="reponse16">
                qdfvqdvqdf    
              </td>
              <td id="reponse26">
                vqdfvqdfv 
              </td>
            </tr>
            <tr>
              <td id="reponse36">
                qdfvqdfv              </td>
              <td id="reponse46" style="border: 1px solid green;">
                qdfvqdvqdfvqd
              </td>
            </tr>
          </tbody></table>

       

          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit6" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="6">
        </form>

2 个答案:

答案 0 :(得分:2)

只需改变:

#listequestion { display: flex; flex-wrap: wrap; } 

为:

#listequestion { display: flex; flex-wrap: wrap; align-items: flex-start; } 

在你的CSS中。你可以看到下面的代码片段。

$('.detailscours').hide()
$('.detailsquestion').hide()

var bonrep= 'reponse4';
var bonrep= '#'+bonrep + '1';
$(bonrep).css("border","1px solid green");

  $(".imagesuppr").click(function(){
    var r = confirm("Etes-vous sur de vouloir supprimer cette question?");
if (r == true) {
    var valeur= $(this).attr('value');
    var formcour="elle"+valeur;
    document.getElementById(formcour).submit();
} 
  });

   $(".imagesedit").click(function(){
   
    var valeur= $(this).attr('value');
    var formcour="formedit"+valeur;
    document.getElementById(formcour).submit();

  });

  $("#bouttonverrou").click(function(){
    document.getElementById("deverquest").submit();
  })


  $(".detailscoursplus").click(function(){
    value = $(this).attr('value')
    displaycours="#detailscours"+ value;
    $(displaycours).toggle("slow")
  
  })

   $(".detailsquestionplus").click(function(){
    value = $(this).attr('value')
    displayquestion="#detailsquestion"+ value;
    $(displayquestion).toggle("slow")
  
  })
.question { border:1px solid; width: 40%; text-align: center; margin:2% auto; } 
.groupe { display: flex; flex-wrap: wrap; justify-content: center; } 
table { text-align: center; width: 100%; } 
#save { display:none; } 
#accueil { margin-left:1% !important; } 
#listequestion { display: flex; flex-wrap: wrap; align-items: flex-start; } 
.imagesuppr { float:right; width:32px; cursor:pointer; } 
.imagesedit { float:right; width:32px; cursor:pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="listequestion">



  <div class="question">

    <form method="post" id="elle1" name="coucou" action="./traitement.php">
      <input type="hidden" name="courssuppr" value="1">
      <br>
      <h2>Cours 1</h2>



      <p>bqfqfdbdfqb </p>
      <br>
      <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="1">
      <div class="detailscours" id="detailscours1" style="display: block;">
        <p>
        </p>
        <p>
          <img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:180px; width:280px">
        </p>

        <p>mon texte par défautqdfbqdfbqfdb</p>

        <p>qdfbqdfbqdf</p>

        <p>bqdfbqdfbqdfb</p>

        <p>qdfbqfdbqdfbqdfb</p>

        <p>&nbsp;</p>
        <p></p>
        <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="1">
        <div class="detailsquestion" id="detailsquestion1" style="display: block;">


          <h2>Question : </h2>
          <p>nouvelle question </p>
          <br>

          <table>
            <tbody>
              <tr>
                <td id="reponse11">
                  reponse la 1
                </td>
                <td id="reponse21">
                  et la 2
                </td>
              </tr>
              <tr>
                <td id="reponse31">
                  ici la 3 </td>
                <td id="reponse41" style="border: 1px solid green;">
                  la bonne reponse 4
                </td>
              </tr>
            </tbody>
          </table>



        </div>
      </div>
    </form>
  </div>





  <form method="post" id="formedit1" name="editquest" action="./editcours.php" style="display:none">
    <input type="hidden" name="coursedit" value="1">
  </form>







  <div class="question">

    <form method="post" id="elle2" name="coucou" action="./traitement.php">

      <input type="hidden" name="courssuppr" value="2">
      <br>
      <h2>Cours 2</h2>



      <p>rvrvervre </p>
      <br>
      <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="2">
      <div class="detailscours" id="detailscours2" style="display: none;">
        <p>
        </p>
        <p>mon texte par défautervvqervqerervervq</p>

        <p>ervqervqerveqrv</p>
        <p></p>
        <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="2">
        <div class="detailsquestion" id="detailsquestion2" style="display: none;">


          <h2>Question : </h2>
          <p>gwdh </p>
          <br>

          <table>
            <tbody>
              <tr>
                <td id="reponse12">
                  fdhwfdhwdh
                </td>
                <td id="reponse22">
                  wdfhwdfh
                </td>
              </tr>
              <tr>
                <td id="reponse32">
                  wdhwdfh </td>
                <td id="reponse42" style="border: 1px solid green;">
                  wdhwdfh
                </td>
              </tr>
            </tbody>
          </table>



        </div>
      </div>
    </form>
  </div>





  <form method="post" id="formedit2" name="editquest" action="./editcours.php" style="display:none">
    <input type="hidden" name="coursedit" value="2">
  </form>







  <div class="question">

    <form method="post" id="elle3" name="coucou" action="./traitement.php">

      <input type="hidden" name="courssuppr" value="3">
      <br>
      <h2>Cours 3</h2>



      <p>bqfqfdbdfqb </p>
      <br>
      <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="3">
      <div class="detailscours" id="detailscours3" style="display: none;">
        <p>
        </p>
        <p>
          <img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:180px; width:280px">
        </p>

        <p>mon texte par défautqdfbqdfbqfdb</p>

        <p>qdfbqdfbqdf</p>

        <p>bqdfbqdfbqdfb</p>

        <p>qdfbqfdbqdfbqdfb</p>

        <p>&nbsp;</p>
        <p></p>
        <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="3">
        <div class="detailsquestion" id="detailsquestion3" style="display: none;">


          <h2>Question : </h2>
          <p>gbgbgb </p>
          <br>

          <table>
            <tbody>
              <tr>
                <td id="reponse13" style="border: 1px solid green;">
                  sfgbsfgbsfg
                </td>
                <td id="reponse23">
                  sgfbsfgb
                </td>
              </tr>
              <tr>
                <td id="reponse33">
                  sfgbsgfb </td>
                <td id="reponse43">
                  sfgbsgfbfsgb
                </td>
              </tr>
            </tbody>
          </table>



        </div>
      </div>
    </form>
  </div>





  <form method="post" id="formedit3" name="editquest" action="./editcours.php" style="display:none">
    <input type="hidden" name="coursedit" value="3">
  </form>







  <div class="question">

    <form method="post" id="elle4" name="coucou" action="./traitement.php">

      <input type="hidden" name="courssuppr" value="4">
      <br>
      <h2>Cours 4</h2>



      <p>hello </p>
      <br>
      <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="4">
      <div class="detailscours" id="detailscours4" style="display: none;">
        <p>
        </p>
        <p>mon texte par défapremier cours</p>

        <p>
          <img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:321px; width:500px">
        </p>
        <p></p>
        <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="4">
        <div class="detailsquestion" id="detailsquestion4" style="display: none;">


          <h2>Question : </h2>
          <p>vaerva </p>
          <br>

          <table>
            <tbody>
              <tr>
                <td id="reponse14">
                  avaraervr
                </td>
                <td id="reponse24">
                  vrveaevae
                </td>
              </tr>
              <tr>
                <td id="reponse34">
                  vaevaerv </td>
                <td id="reponse44" style="border: 1px solid green;">
                  aevaervaev
                </td>
              </tr>
            </tbody>
          </table>



        </div>
      </div>
    </form>
  </div>





  <form method="post" id="formedit4" name="editquest" action="./editcours.php" style="display:none">
    <input type="hidden" name="coursedit" value="4">
  </form>







  <div class="question">

    <form method="post" id="elle5" name="coucou" action="./traitement.php">

      <input type="hidden" name="courssuppr" value="5">
      <br>
      <h2>Cours 5</h2>



      <p>dbsfbf </p>
      <br>
      <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="5">
      <div class="detailscours" id="detailscours5" style="display: none;">
        <p>
        </p>
        <p>mon texte par défautrgqerv</p>

        <p>revervrev</p>

        <p>rvaervaervver</p>
        <p></p>
        <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="5">
        <div class="detailsquestion" id="detailsquestion5" style="display: none;">


          <h2>Question : </h2>
          <p>qdfvqdvqd </p>
          <br>

          <table>
            <tbody>
              <tr>
                <td id="reponse15">
                  vqfdvqqfdvq
                </td>
                <td id="reponse25">
                  vqdvqdvqfd
                </td>
              </tr>
              <tr>
                <td id="reponse35" style="border: 1px solid green;">
                  qdfvqfdv </td>
                <td id="reponse45">
                  fvqdvqdvqdvqdfv
                </td>
              </tr>
            </tbody>
          </table>


        </div>
      </div>
    </form>
  </div>





  <form method="post" id="formedit5" name="editquest" action="./editcours.php" style="display:none">
    <input type="hidden" name="coursedit" value="5">
  </form>







<div class="question">
  <form method="post" id="elle6" name="coucou" action="./traitement.php">
    <img class="imagesuppr" src="../images/delete.PNG" value="6">
    <img class="imagesedit" src="../images/edit.PNG" value="6">
    <input type="hidden" name="courssuppr" value="6">
    <br>
    <h2>Cours 6</h2>
    <p>rvrvervre </p>
    <br>
    <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="6">
    <div class="detailscours" id="detailscours6" style="display: none;">
      <p>
      </p>
      <p>mon texte par défautervvqervqerervervq</p>
      <p>ervqervqerveqrv</p>
      <p></p>
      <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="6">
      <div class="detailsquestion" id="detailsquestion6" style="display: none;">
        <h2>Question : </h2>
        <p>qdfvqdfv </p>
        <br>
        <table>
          <tbody>
            <tr>
              <td id="reponse16">
                qdfvqdvqdf
              </td>
              <td id="reponse26">
                vqdfvqdfv
              </td>
            </tr>
            <tr>
              <td id="reponse36">
                qdfvqdfv </td>
              <td id="reponse46" style="border: 1px solid green;">
                qdfvqdvqdfvqd
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </form>
</div>
<form method="post" id="formedit6" name="editquest" action="./editcours.php" style="display:none">
  <input type="hidden" name="coursedit" value="6">
</form>

答案 1 :(得分:0)

使用align-items: flex-start;

#listequestion{
    align-items: flex-start;
}

&#13;
&#13;
$('.detailscours').hide()
$('.detailsquestion').hide()

var bonrep= 'reponse4';
var bonrep= '#'+bonrep + '1';
$(bonrep).css("border","1px solid green");

  $(".imagesuppr").click(function(){
    var r = confirm("Etes-vous sur de vouloir supprimer cette question?");
if (r == true) {
    var valeur= $(this).attr('value');
    var formcour="elle"+valeur;
    document.getElementById(formcour).submit();
} 
  });

   $(".imagesedit").click(function(){
   
    var valeur= $(this).attr('value');
    var formcour="formedit"+valeur;
    document.getElementById(formcour).submit();

  });

  $("#bouttonverrou").click(function(){
    document.getElementById("deverquest").submit();
  })


  $(".detailscoursplus").click(function(){
    value = $(this).attr('value')
    displaycours="#detailscours"+ value;
    $(displaycours).toggle("slow")
  
  })

   $(".detailsquestionplus").click(function(){
    value = $(this).attr('value')
    displayquestion="#detailsquestion"+ value;
    $(displayquestion).toggle("slow")
  
  })
&#13;
.question{border:1px solid;
width: 40%;
text-align: center;
margin:2% auto;
}
.groupe{display: flex;
  flex-wrap: wrap;
  justify-content: center;

}
table{
  text-align: center;
  width: 100%;
}

#save{
  display:none;
  
}
#accueil{margin-left:1% !important;}

#listequestion{
	display: flex;
	flex-wrap: wrap;align-items: flex-start;
}
.imagesuppr
{
	float:right;
	width:32px;
	cursor:pointer;

}

.imagesedit
{
	float:right;
	width:32px;
	cursor:pointer;

}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="listequestion">



          	<div class="question">

          <form method="post" id="elle1" name="coucou" action="./traitement.php">
          <input type="hidden" name="courssuppr" value="1">
          <br>
          <h2>Cours 1</h2>



          <p>bqfqfdbdfqb </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="1">
         <div class="detailscours" id="detailscours1" style="display: block;">
          <p>
          </p><p><img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:180px; width:280px"></p>

<p>mon texte par défautqdfbqdfbqfdb</p>

<p>qdfbqdfbqdf</p>

<p>bqdfbqdfbqdfb</p>

<p>qdfbqfdbqdfbqdfb</p>

<p>&nbsp;</p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="1">
          <div class="detailsquestion" id="detailsquestion1" style="display: block;">
            

                              <h2>Question : </h2>
                <p>nouvelle question </p><br>

          <table>
            <tbody><tr>
              <td id="reponse11">
                reponse la 1    
              </td>
              <td id="reponse21">
                et la 2 
              </td>
            </tr>
            <tr>
              <td id="reponse31">
                ici la 3              </td>
              <td id="reponse41" style="border: 1px solid green;">
                la bonne reponse 4 
              </td>
            </tr>
          </tbody></table>



          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit1" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="1">
        </form>


       
        
           


          	<div class="question">

          <form method="post" id="elle2" name="coucou" action="./traitement.php">
         
          <input type="hidden" name="courssuppr" value="2">
          <br>
          <h2>Cours 2</h2>



          <p>rvrvervre </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="2">
         <div class="detailscours" id="detailscours2" style="display: none;">
          <p>
          </p><p>mon texte par défautervvqervqerervervq</p>

<p>ervqervqerveqrv</p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="2">
          <div class="detailsquestion" id="detailsquestion2" style="display: none;">
            

                              <h2>Question : </h2>
                <p>gwdh </p><br>

          <table>
            <tbody><tr>
              <td id="reponse12">
                fdhwfdhwdh    
              </td>
              <td id="reponse22">
                wdfhwdfh 
              </td>
            </tr>
            <tr>
              <td id="reponse32">
                wdhwdfh              </td>
              <td id="reponse42" style="border: 1px solid green;">
                wdhwdfh
              </td>
            </tr>
          </tbody></table>

        

          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit2" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="2">
        </form>


       
        
           


          	<div class="question">

          <form method="post" id="elle3" name="coucou" action="./traitement.php">
          
          <input type="hidden" name="courssuppr" value="3">
          <br>
          <h2>Cours 3</h2>



          <p>bqfqfdbdfqb </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="3">
         <div class="detailscours" id="detailscours3" style="display: none;">
          <p>
          </p><p><img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:180px; width:280px"></p>

<p>mon texte par défautqdfbqdfbqfdb</p>

<p>qdfbqdfbqdf</p>

<p>bqdfbqdfbqdfb</p>

<p>qdfbqfdbqdfbqdfb</p>

<p>&nbsp;</p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="3">
          <div class="detailsquestion" id="detailsquestion3" style="display: none;">
            

                              <h2>Question : </h2>
                <p>gbgbgb </p><br>

          <table>
            <tbody><tr>
              <td id="reponse13" style="border: 1px solid green;">
                sfgbsfgbsfg    
              </td>
              <td id="reponse23">
                sgfbsfgb 
              </td>
            </tr>
            <tr>
              <td id="reponse33">
                sfgbsgfb              </td>
              <td id="reponse43">
                sfgbsgfbfsgb
              </td>
            </tr>
          </tbody></table>

         

          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit3" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="3">
        </form>


       
        
           


          	<div class="question">

          <form method="post" id="elle4" name="coucou" action="./traitement.php">
          
          <input type="hidden" name="courssuppr" value="4">
          <br>
          <h2>Cours 4</h2>



          <p>hello </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="4">
         <div class="detailscours" id="detailscours4" style="display: none;">
          <p>
          </p><p>mon texte par défapremier cours</p>

<p><img alt="" src="/Cours/plugin/kcfinder/upload/images/Android-gif2.gif" style="height:321px; width:500px"></p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="4">
          <div class="detailsquestion" id="detailsquestion4" style="display: none;">
            

                              <h2>Question : </h2>
                <p>vaerva </p><br>

          <table>
            <tbody><tr>
              <td id="reponse14">
                avaraervr    
              </td>
              <td id="reponse24">
                vrveaevae 
              </td>
            </tr>
            <tr>
              <td id="reponse34">
                vaevaerv              </td>
              <td id="reponse44" style="border: 1px solid green;">
                aevaervaev
              </td>
            </tr>
          </tbody></table>



          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit4" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="4">
        </form>


       
        
           


          	<div class="question">

          <form method="post" id="elle5" name="coucou" action="./traitement.php">
          
          <input type="hidden" name="courssuppr" value="5">
          <br>
          <h2>Cours 5</h2>



          <p>dbsfbf </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="5">
         <div class="detailscours" id="detailscours5" style="display: none;">
          <p>
          </p><p>mon texte par défautrgqerv</p>

<p>revervrev</p>

<p>rvaervaervver</p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="5">
          <div class="detailsquestion" id="detailsquestion5" style="display: none;">
            

                              <h2>Question : </h2>
                <p>qdfvqdvqd </p><br>

          <table>
            <tbody><tr>
              <td id="reponse15">
                vqfdvqqfdvq    
              </td>
              <td id="reponse25">
                vqdvqdvqfd 
              </td>
            </tr>
            <tr>
              <td id="reponse35" style="border: 1px solid green;">
                qdfvqfdv              </td>
              <td id="reponse45">
                fvqdvqdvqdvqdfv
              </td>
            </tr>
          </tbody></table>

         
          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit5" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="5">
        </form>


       
        
           


          	<div class="question">

          <form method="post" id="elle6" name="coucou" action="./traitement.php">
          <img class="imagesuppr" src="../images/delete.PNG" value="6">
          <img class="imagesedit" src="../images/edit.PNG" value="6">
          <input type="hidden" name="courssuppr" value="6">
          <br>
          <h2>Cours 6</h2>



          <p>rvrvervre </p><br>
          <img class="detailscoursplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="6">
         <div class="detailscours" id="detailscours6" style="display: none;">
          <p>
          </p><p>mon texte par défautervvqervqerervervq</p>

          <p>ervqervqerveqrv</p>
          <p></p>
           <img class="detailsquestionplus" src="https://image.flaticon.com/icons/svg/149/149145.svg" width=32px height=32px value="6">
          <div class="detailsquestion" id="detailsquestion6" style="display: none;">
            

                              <h2>Question : </h2>
                <p>qdfvqdfv </p><br>

          <table>
            <tbody><tr>
              <td id="reponse16">
                qdfvqdvqdf    
              </td>
              <td id="reponse26">
                vqdfvqdfv 
              </td>
            </tr>
            <tr>
              <td id="reponse36">
                qdfvqdfv              </td>
              <td id="reponse46" style="border: 1px solid green;">
                qdfvqdvqdfvqd
              </td>
            </tr>
          </tbody></table>

       

          </div>
          </div>
          </form></div>
          
        



         <form method="post" id="formedit6" name="editquest" action="./editcours.php" style="display:none">
          <input type="hidden" name="coursedit" value="6">
        </form>
&#13;
&#13;
&#13;