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

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>

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

1 个答案: