要素を並べて並べる

Question

私はこれらの2つの要素を並べて配置しようとしています。私はフロートを使ってみました：右か左に浮いていますが、これまでの運はありません。ここに私のHTMLコードです。

#idd11 { 
 

 
     float: left; 
 

 
     width 100px; 
 

 
     height 100px; 
 

 
    }

<div class="row row-bottom-padded-sm" id="idd11" style="display: block"> 
 
    <div class="col-md-4 col-md-9 col-xxs-9"> 
 
    <div class="fh5co-project-item to-animate"> 
 
     <div class="fh5co-text"> 
 
     <span><br></span> 
 
     <h2 align="center">Items List</h2> 
 
     <span><br></span> 
 
     <div id="MainMenu"> 
 
      <div class="list-group panel"> 
 
      <a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu"> 
 
           Item 1 
 
           <i class="fa fa-caret-down"></i> 
 
          </a> 
 
      <div class="collapse" id="item1"></div> 
 
      </div> 
 

 
      <div class="list-group panel"> 
 
      <a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu"> 
 
           Item 2 
 
           <i class="fa fa-caret-down"></i> 
 
          </a> 
 
      <div class="collapse" id="item2"></div> 
 
      </div> 
 
     </div> 
 
     <h2 id="answer">Footer</h2> 
 
     </div> 
 
    </div> 
 
    <!--Answer A--> 
 
    <div class="row row-bottom-padded-sm" id="floating" style="display: block"> 
 
     <div class="col-md-4 col-md-3 col-xxs-3"> 
 
     <div class="fh5co-project-item to-animate"> 
 
      <div class="fh5co-text"> 
 
      <span><br></span> 
 
      <div id="MainMenu"> 
 
       <h1 id="newAnswer">A</h1> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!--Answer A--> 
 
    </div> 
 
</div>

誰がそれで私を助けることができる場合は、それをいただければ幸いです。私は少なくとも試しました：p。私もスクリーンショットを添付しました：アイテムリストの右側にAエレメントを入れたいと思います。 id="MainMenu"ため

Answer 1

これを行うには3つのdivが必要です。 1つのdivは他の2つのchild divを保持します。次に、2つの子divを互いに隣に浮かべます。だから、あなたがdivの中にお互いの隣に浮かべたいものを置いて浮かせてみてください。あなたのコードで

HTML

<div id='parent'> 
    <div id='child1'> 
     ... 
    </div> <!-- End child1 div --> 
    <div id='child2'> 
     ... 
    </div> <!-- End child2 div --> 
</div> <!-- End parent div --> 

CSS

#parent{ 
    width: 500px; 
} 
#child1{ 
    float: left; 
    width: 40%; 
} 
#child2{ 
    float: right; 
    width: 40%; 
} 

、あなたはあなたが左にfloatしようとしているdiv要素の中に右へfloatしようとしているdiv要素を持っています。 divsが分離され、親divに入れられていることを確認する必要があります。私の例を見て、私のdivsは、互いに独立している様子がわかりますが、親div

<div id='parent'> <!-- Look here --> 
<div class="row row-bottom-padded-sm" id="idd11" style="display: block"> 
    <div class="col-md-4 col-md-9 col-xxs-9"> 
    <div class="fh5co-project-item to-animate"> 
     <div class="fh5co-text"> 
     <span><br></span> 
     <h2 align="center">Items List</h2> 
     <span><br></span> 
     <div id="MainMenu"> 
      <div class="list-group panel"> 
      <a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu"> 
           Item 1 
           <i class="fa fa-caret-down"></i> 
          </a> 
      <div class="collapse" id="item1"></div> 
      </div> 

      <div class="list-group panel"> 
      <a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu"> 
           Item 2 
           <i class="fa fa-caret-down"></i> 
          </a> 
      <div class="collapse" id="item2"></div> 
      </div> 

     <h2 id="answer">Footer</h2> 
     </div> 
    </div> 
    </div> 
</div> <!-- End the floating left section --> 
    <!--Answer A--> 
    <div class="row row-bottom-padded-sm" id="floating" style="display: block"> 
     <div class="col-md-4 col-md-3 col-xxs-3"> 
     <div class="fh5co-project-item to-animate"> 
      <div class="fh5co-text"> 
      <span><br></span> 
      <div id="MainMenu"> 
       <h1 id="newAnswer">A</h1> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> <!-- End the floating right Section --> 
    <!--Answer A--> 

</div> <!-- End parent div --> 

Answer 2

使用display: flex;。その子要素の幅と高さを調整することもできます。 css3 flexboxプロパティの詳細を確認してください