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

Question

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

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

.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

标签： csstwitter-bootstrapbootstrap-4

Answer 1

利用media-query

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

见小提琴：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>