并排放置元素

我试图将这两个元素并排放置。我试着用float：right或float left，但是到目前为止没有运气。这是我的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元素放在项目列表的右侧。

来源

2016-06-28 Jack333

里面你正试图在这里漂浮只有一个'div'。 id为'idd11'的主'div'。你需要多个div和另一个div来保持它们以便将它们彼此相邻地浮动。 – 2016-06-28 17:37:01

你只浮动了＃idd11 div左边，你还必须浮动#floating div右 – user65439

我试了左右两边，并且不起作用 – Jack333

您需要三个div来完成此操作。一个div来容纳另外两个孩子div。然后将两个子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你试图float到左边专区内右侧的股利。您需要确保将您的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 -->

来源

2016-06-28 17:49:38

我试过这个，但每当我申请的浮动：第二个孩子的权利（在我的情况下id =“浮动”），它只是消失。 – Jack333

尝试使宽度低于父div的50％。有时候，当它达到50％时，他们往往会被推挤。或者你可以看看'overflow'属性。这规定了当他们摆脱界限时应该怎么做。我会更新我的回答 – 2016-06-28 18:10:32

我试过了，我甚至增加了宽度，但仍然消失，我不知道我做错了什么。我把孩子分开，并把他们放在一位家长的陪同下。 – Jack333

使用display: flex;为id="MainMenu"。然后您可以调整其子元素的宽度和高度。尝试了解关于css3 flexbox属性的更多信息

来源

2016-06-28 17:41:11

并排放置元素

回答

相关问题