html - 并排放置元素

Question

我试图将这两个元素并排放置。我尝试使用 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 元素放在 Items 列表的右侧。

Answer 1

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