Question

我试图将这两个元素并排放在一起。我尝试使用浮动：向右或向左浮动，但到目前为止没有运气。这是我的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

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

Answer 2

你需要三个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的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 -->

将元素并排放置

2 个答案: