如何将要粘贴的元素放置在div的右侧？

Question

有一个fieldset，我想要放在div之后;这里是我尝试：

<div id="liste_tables"> 
    <div id="salles"> // div I want the fieldset to be close to 
     <div class="header">Salle</div> 
     <div class="flex-grid"> 
      <?php 
      $salles = Salle::lireParCritere([]); 
      foreach ($salles as $key => $salle) { 
      ?> 
      <div class="row"> 
       <div class="cell"> 
        <div id="tile_salle_<?php echo $key; ?>" data-pk="<?php echo $salle->salle_code; ?>" class="tile-square fg-white"> 
         <div class="tile-content"> 
          <div class="image-container"> 
           <div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div> 
           <div class="tile-label header fg-cyan"><?php echo $salle->salle_lib; ?></div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <?php } ?> 
     </div> 
    </div> 
    <fieldset> 
     <legend class="header">Tables</legend> 
     <div id="tables"></div> 
    </fieldset> 
</div> 

在运行时，fieldset是在div的底部。那么如何在div后面加上fieldset，ID为“#salles”？

编辑：你可以找到css here;有关的CSS是metro.css。

这里是JsFiddle。

Answer 1

好吧，我发现它;我将容器更改为MetroUI凝聚网格：

<div id="liste_tables" class="grid condensed"> 
    <div class="row cells4"> 
     <div class="cell"><span class="header">Salle</span></div> 
     <div class="cell colspan3"><span class="header">Tables</span></div> 
    </div> 
    <div class="row cells4"> 
     <div class="cell"> 
      <div class="grid condensed"> 
       <?php 
       $salles = Salle::lireParCritere([]); 
       foreach ($salles as $key => $salle) { 
       ?> 
       <div class="row"> 
        <div class="cell"> 
         <div id="tile_salle_<?php echo $key; ?>" data-pk="<?php echo $salle->salle_code; ?>" class="tile-square fg-white"> 
          <div class="tile-content"> 
           <div class="image-container"> 
            <div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div> 
            <div class="tile-label header fg-cyan"><?php echo $salle->salle_lib; ?></div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <?php } ?> 
      </div> 
     </div> 
     <div class="cell colspan3"> 
      <div id="tables"></div> 
     </div> 
    </div> 
</div> 

Answer 2

试试这个：

CSS

#salles { 
    border: solid 1px red; 
    display:inline-block; 
    vertical-align:text-top; 
} 
fieldset { 
    border: solid 1px blue; 
    display:inline-block; 
} 

HTML

<div id="liste_tables"> 
    <div id="salles"> // div I want the fieldset to be close to 
     <div class="header">Salle</div> 
     <div class="flex-grid"> 
      <?php 
      $salles = Salle::lireParCritere([]); 
      foreach ($salles as $key => $salle) { 
      ?> 
      <div class="row"> 
       <div class="cell"> 
        <div id="tile_salle_<?php echo $key; ?>" data-pk="<?php echo $salle->salle_code; ?>" class="tile-square fg-white"> 
         <div class="tile-content"> 
          <div class="image-container"> 
           <div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div> 
           <div class="tile-label header fg-cyan"><?php echo $salle->salle_lib; ?></div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <?php } ?> 
     </div> 
    </div> 
    <fieldset> 
     <legend class="header">Tables</legend> 
     <div id="tables"></div> 
    </fieldset> 
</div> 

退房的JsFiddle