Question

我遇到了一个问题。在我当前的项目中，我有两个彼此相邻的部分，两个部分都设置为覆盖页面宽度的50％，使用float：left和float：right。但是，当我尝试添加另一个部分以继续使用该页面时，我感到震惊的是它没有正确显示，并且Firefox的inspect元素显示了前两个部分后面的大部分内容。

以下是代码：

<section id="first-half">
    <div class="container">
        <a href="#" class="content-page">
        <div class="selectoption">
            <img src="image.png">
        </div>
        </a>
    </div> 
</section>
<section id="second-half">    
 <div class="container">
     <a href="#" class="content-two-page">
     <div class="optionselect-two">
            <img src="image_2.png">
     </div>
     </a>   

</section>

CSS

#first-half  {width: 50%; height: 100%;background-image: url('image.png'); overflow: hidden; float: left; }
#second-half {width: 50%; height: 100%; background-image: url('image.png'); overflow: hidden; float: right }

感谢您提出任何可能的回复。

编辑：在评论部分引用非常友好的kukkuz：

“新元素低于前两个元素，因为你还没有清除浮动 - 你必须始终清除浮动容器 - 请参阅example here”

感谢大家的帮助

Answer 1

div {height: 200px;}
#first-half  {width: 50%; height: 100%;background-image: url('image.png'); overflow: hidden; float: left; }
#second-half {width: 50%; height: 100%; background-image: url('image.png'); overflow: hidden; float: right }

<div>
  <section id="first-half">
    <div class="container">
        <a href="#" class="content-page">
        <div class="selectoption">
            <img src="image.png">
        </div>
        </a>
    </div> 
</section>
<section id="second-half">    
 <div class="container">
     <a href="#" class="content-two-page">
     <div class="optionselect-two">
            <img src="image_2.png">
     </div>
     </a>   
  </div>
</section>
</div>

Answer 2

这就是你需要的吗？

section {
  height: 100%;
  background-image: url('image.png');
  overflow: hidden;
  float: left;
}
#inline {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
}

<div id="inline">
  <section id="first-half">
    <div class="container">
      <a href="#" class="content-page">
        <div class="selectoption">
          <img src="image.png">
        </div>
      </a>
    </div>
  </section>
  <section id="second-half">
    <div class="container">
      <a href="#" class="content-two-page">
        <div class="optionselect-two">
          <img src="image_2.png">
        </div>
      </a>

  </section>
  <section id="second-half">
    <div class="container">
      <a href="#" class="content-two-page">
        <div class="optionselect-two">
          <img src="image_2.png">
        </div>
      </a>

  </section>

  </div>

新部分显示在另一个设置为浮动的部分下

2 个答案: