css - 调整屏幕大小时如何使 block 向左移动？

Question

我有一个带有重叠图像的文本的 div block ，当我调整屏幕大小时，带有文本的 block 变小但保持在同一位置。我想要实现的是在调整屏幕大小时将 block 移动到左侧，以便整个 block 可以适合屏幕。

我怎样才能正确地做到这一点？ 这是我当前的代码..

.our-project-section {
  margin-top: 100px;
}

.zundas-project img {
  max-width: 100%;
  max-height: 50%;
  height: auto;
  width: auto;
}

.projects-wrapper {
  margin-top: 50px;
  padding-bottom: 60px;
}

.project-description {
  padding: 25px;
  width: 50%;
  height: auto;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  top: 50%;
  right: -30%;
  color: #fff;
  text-align: center;
}

.project-description p {
  letter-spacing: 1px;
  margin-top: 20px;
}

.project-description h3 {
  position: relative;
}

.project-description h3::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 3px;
  background: #fff;
  top: 32px;
  left: -85px;
  right: 0;
  margin: auto;
}

.project-description a {
  position: relative;
  top: 20px;
}

<section class="our-project-section">

  <div class="row">

    <div class="col-xs-12 col-md-8">

      <div class="projects-wrapper">

        <div class="zundas-project">

          <img src="https://static.dezeen.com/uploads/2018/02/riverfront-square-michael-green-lotus-newark-new-jersey-usa-largest-timber-office-building_dezeen_2364_col_1-852x537.jpg" alt="">
          <div class="project-description">
            <h3>Project Name</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga id molestias enim molestiae, corporis at ad ipsum perferendis commodi dicta dolorem ea eos magnam reprehenderit quae temporibus. Animi quasi labore fugit reiciendis odit officiis
              reprehenderit saepe earum.</p>
            <a href="#">More Information</a>
          </div>

        </div>

      </div>

    </div>

  </div>

</section>

JSFIDDLE

Answer 1

使用media-query

@media screen and (max-width: 758px) {
  .project-description {
       right: 0;
    left: -19px;
  }
}

参见 fiddle :https://jsfiddle.net/kp6L28rz/11/

.our-project-section {
    margin-top: 100px;
}

.zundas-project img {
    max-width: 100%;
    max-height: 50%;
    height: auto;
    width: auto;

}

.projects-wrapper {
    margin-top: 50px;
    padding-bottom: 60px;
}

.project-description {
    padding: 25px;
    width: 50%;
    /* width: 400px; */
    height: auto;
    background-color:rgba(0,0,0,.5);
    position: absolute;
    top: 50%;
    /* right: -80px; */
    right: -30%;
    color: #fff;
    text-align: center;

}

.project-description p {
    letter-spacing: 1px;
    margin-top: 20px;
}

.project-description h3 {
    position: relative;
}

.project-description h3::after {
    content:'';
    position:absolute;
    width:80px;
    height:3px;
    background:#fff;
    top:32px;
    left:-85px;
    right:0;
    margin:auto;
}

.project-description a {
    color: #fff;
    font-weight: 800;
    position: relative;
    top:20px;
}
@media screen and (max-width: 758px) {
  .project-description {
       right: 0;
    left: -19px;
  }
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

        <div class="container">
            <section class="our-project-section">

                <div class="row">

                    <div class="col-xs-12 col-md-8">

                        <div class="projects-wrapper">

                            <div class="zundas-project">

                                <img src="https://static.dezeen.com/uploads/2018/02/riverfront-square-michael-green-lotus-newark-new-jersey-usa-largest-timber-office-building_dezeen_2364_col_1-852x537.jpg" alt="">
                                <div class="project-description">
                                    <h3>Project Name</h3>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga id molestias enim molestiae, corporis at ad ipsum perferendis commodi dicta dolorem ea eos magnam reprehenderit quae temporibus. Animi quasi labore fugit reiciendis odit officiis reprehenderit saepe earum.</p>
                                    <a href="#">More Information</a>
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </section>

        </div>