div 不会并排坐在一起

Question

我在让我的 div 元素并排坐在一起时遇到了一些困难。 页面上有足够的宽度让一个 div 紧挨着另一个，但它似乎只是坐在另一个 div 的下方。

HTML 父组件：

<div class="Container">
  <div class="header">
    <div>
      <h1>Information & Advice</h1>
    </div> 
    <div>
      <h2>From The Daylight Experts</h2>
    </div>   
  </div>
  <div class="wrapper">
    <app-carousel></app-carousel>
    <app-instagram></app-instagram> 
    <app-guides></app-guides>
  </div>     
</div>

CSS父级：

.Container {
  padding: 0;
  width:100%;
  height: 100%;
  margin: 0;
  position: absolute;
}

.header {
  display: flex;
  justify-content: center;
}

.wrapper {
  position: absolute;
  float: left;
}

应用轮播组件.html：

<div class="carouselContainer">
  <mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
    <mdb-carousel-item>
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide">
    </mdb-carousel-item>
    <mdb-carousel-item>
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg" alt="Second slide">
    </mdb-carousel-item>
    <mdb-carousel-item>
      <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg" alt="Third slide">
    </mdb-carousel-item>
  </mdb-carousel>
</div>

应用轮播组件.css：

.carouselContainer {
  width: 59.5%;
  margin-left: 15px;
}

app-instagram 组件 .html：

<div class="instagramContainer">
  <div id="curator-feed-default-layout">
    <a href="https://curator.io" target="_blank" class="crt-logo crt-tag">Powered by Curator.io</a>
  </div>
</div>

app-instagram 组件 .css：

.instagramContainer {
  width: 30%;
  height: 100%;
  float: left;
}

这当前使 instagram <div>位于旋转木马<div>下方。 我希望它们并排，我认为这可以通过浮动容器的子元素来实现。

Answer 1

您可以使用flex使其干净，这将使您清晰可见，这可能会帮助您进行更改。

 .Container { padding: 0; width: 100%; height: 100%; margin: 0; display: flex; /* you need this to move content side by side */ flex-direction: row; /* provide the width for parent */ width: 800px; } .header { /* inherit parent width */ width: 400px; border: 1px solid red; } .wrapper { width: 400px; /* inherit parent width */ border: 1px solid yellow; }

 <div class="Container"> <div class="header"> <div> <h1>Information & Advice</h1> </div> <div> <h2>From The Daylight Experts</h2> </div> </div> <div class="wrapper">Your wrapper content here... <app-carousel></app-carousel> <app-instagram></app-instagram> <app-guides></app-guides> </div> </div>