html - 在三个框的顶部显示 flex 标题

Question

在 788px 和 1024px 视口(viewport)之间。我正在使用 display: flex(仍然是新手)有没有一种方法可以不更改 html 并且不使用 position:absolute 来获得标题:三个猫图像框顶部的“KONTAKT”？

也许使用 flex 方法或其他我没有想到的方法。

http://codepen.io/rKaiser/pen/zBXqmr

@media (max-width: 1024px)  {
  .container {
    flex-direction: column;
  }
  .left {width: 100%;}
  .contacts {width:100%;display:flex; flex-direction: row;}
  .box2 {
    flex-direction: column;
  }
  .img { width: auto;}
  .content {  width:auto; text-align: center;}
  h2 {}
}

Answer 1

在 768px 和 1024px 之间，不要使用 flex 因为 h2 也会受到 display:flex; 的影响； flex-direction:row 在 .content 上。因此，如果您希望 3 个 box2 位于同一行，请使用 float:left;width:33.33%;display:block 这样 h3 将位于顶部

在那之后，低于 768px 返回到 display:flex，你就设置好了。

请参阅下面的代码片段或此处的 jsfiddle > JSFIDDLE

如果有帮助请告诉我

* {
  margin: 0;
  padding: 0;
}
h6 {
  font-size: 16px;
}
html, body {
  width:100%
}
.container {
  width:1170px;
  background: green;margin: 0 auto;
  display: flex;
}
@media (max-width: 1169px)  {
  .container {
    width: 100%;
  }
}

.left {
  width:70%;
  background: #99ccff;
}

.contacts {
  width:30%;
}

.box2 {
  width: 100%;
  background: #ff6699;
  display:flex;
  justify-content: center;
  align-items: center;
}
.img, .content {
  margin:10px;

}
.img {  width:40%;}
.content {  width:60%;}

.img img{
  max-width: 100%;
}

@media (max-width: 1024px)  {
  .container {
    flex-direction: column;
  }
  .left {width: 100%;}
  .contacts {width:100%;}
  .box2 {
    float:left;width:33.33%;text-align:center;display:block;
  }
  .img { width: auto;}
  .content {  width:auto; text-align: center;}
  h2 {text-align:center;}
}

@media (max-width: 768px)  {
  .contacts {width:100%;display:flex; flex-direction: column;}
  .box2 {
    flex-direction: row;
    display:flex;
    width:100%;
  }
  .img { width: 50%; text-align: right}
  .content {  width:50%; text-align: left;}
}

  <div class="container">
    <div class="left">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature hfrom 45 BC, makging it over 2000 years old. Richard McClintock, a Lat
    </div>
    
    <div class="contacts">
      <h2>KONTAKT</h2>
      <div class="box2">
        <div class="img">
          <img src="http://placekitten.com/150/150" alt="" />
        </div>
        <div class="content">
          <h6>Sven Svennsonn</h6>
          <h6>asdas@hot.ee21312</h6>
          <h6>asddasd as asd</h6>
          <h6>asdasd as asd</h6>
        </div>
      </div>
      <div class="box2">
        <div class="img">
          <img src="http://placekitten.com/150/150" alt="" />
        </div>
        <div class="content">
          <h6>asdasd as daasd</h6>
          <h6>asdas dasda asd</h6>
          <h6>asdasd as asd</h6>
          <h6>asdasd as asd</h6>
        </div>
      </div>
      
        <div class="box2">
        <div class="img">
          <img src="http://placekitten.com/150/150" alt="" />
        </div>
        <div class="content">
          <h6>Name Namesson3</h6>
          <h6>Lorem ipsum dolor sit</h6>
          <h6>mail.mail@lorem.se</h6>
          <h6>+555 666 999</h6>
        </div>
      </div>
    
    
    </div>
  </div>