主页 / 问题 / 863393
Accepted
Nulliza
Asked:2020-08-02 16:27:32 +0000 UTC2020-08-02 16:27:32 +0000 UTC

如何使用示例使 flexbox 移动？

  • 772

我还没有完全弄清楚 flexbox，我不知道如何让信息框在移动设备上缩放或打开时向左移动。如何才能做到这一点？

怎么做

* {
  margin: 0; 
  padding: 0;
}
body {  
  background-color: #f2f2f2;
  font-family: "Futura PT", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* для корректного отображения текста на всех экранах*/
  -webkit-overflow-scrolling: touch;
  /*для нормального скроллинга*/
}
.header-top {
   height:40px;
    background: #ffffff;
    line-height:40px;    
}
main{
  display: flex;
  flex-direction: column;
  width: 90%;
}

main .top-slide{
  background: url(img/Чуваки.png);
  width: 1240px;
  height: 376px;
  margin-top: 5%;
  margin-left: 5%; 
  margin-right: 5%;
  margin-bottom: 5%;
  display: block;
  vertical-align: middle;
}

.box-white{
  background-color: #ffffff;
  width: 292px;
  height: 292px;  
  position: absolute;
  margin-top: 42px;
  margin-left: 860px; 
  margin-right: 86px;
  margin-bottom: 42px;
}

.first-p{
  width: 262px;
  height: 37px;
  color: #5497cc;
  font-family: "Futura PT";
  font-size: 20px;
  font-weight: 300;
  position: absolute;
  margin-top: 18px;
  margin-right: 16px;  
  margin-bottom: 243px;
  margin-left: 14px; 
}

.cool-p{
  width: 262px;
  height: 59px;
  color: #000000;
  font-family: "Futura PT";
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  margin-top: 48px;   
  margin-right: 15px;
  margin-bottom: 185px;
  margin-left: 15px;
}
.third-p{
  width: 262px;
  height: 86px;
  color: #000000;
  font-family: "Futura PT";
  font-size: 16px;
  font-weight: 300;
  position: absolute;
  margin-top: 119px;   
  margin-right: 15px;
  margin-bottom: 87px;
  margin-left: 15px;
}
.read-more-p a{  
  width: 95px;
  height: 37px;
  color: #5497cc;
  font-family: "Futura PT";
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  position: absolute;
  margin-top: 253px;   
  margin-right: 51px;
  margin-bottom: 2px;
  margin-left: 146px;
}
.read-more-p img{
  position: absolute;
  margin-top: 257px;   
  margin-right: 31px;
  margin-bottom: 23px;
  margin-left: 247px;
}
<header>
  <div class="header-top">
    Header top
  </div>
</header>
<div id="container" style="width:1366px;margin:0 auto;">
  <!-- С помощью этого кода мы центрируем сайт-->	
<main>
<section class="top-slide">
  <section class="box-white">
    <p class="first-p">Головне</p>
    <p class="cool-p">Тут буде також дуже крутий заголовок</p>
    <p class="third-p">Integer quis interdum libero. Praesent et ante et dolor tincidunt semper. Nulla id nibh vel metus molesti</p>
    <p class="read-more-p"><a href="#">Читати далі</a><img src="img/arrow.png" alt="arrow"></p>				
  </section>
</section>

html

1 个回答

  1. Best Answer

    我了解您需要将框移到移动屏幕上的左侧。

    @media(max-width: 991px) {
    .content {
        justify-content: flex-start;
    }
}

    这是一个可以帮助您理解 flex 的游戏：http: //flexboxfroggy.com/#ru

    • 1

相关问题