显示在三个盒子顶部的flex标题

Question

在788px和1024px视口之间。我正在使用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＆gt;的 JSFIDDLE

让我知道是否有帮助

＆＃13;

＆＃13;

* {
  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;}
}

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;