Question

我试图仅将图像从（视口的）右边缘移出一点，仅用于移动设备，但是当我调整浏览器的大小时，图像将“返回”。无论如何，如何将其保留在视口之外，并使“某些文本”从图像的左边框开始？

body {
    background-color: #ff0000 !important;
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
    font-weight: 800;
}

#topbar {
    color: #fff;
    font-size: 21px;
    margin: 20px 0;
    text-align: center;
    font-weight: 500;
}

.center {
    font-size: 35px;
    text-align: center;
}

.right {
    float: right;
}

#lower-text {
    color: #fff;
    font-size: 68px;
    font-weight: 500;
    float: right;
    margin: 220px 0px 120px 0;
    
}

#main-pic {
    width: 100%;
    margin-right: auto;
    margin-bottom: 50px;
    float: right;
}

@media only screen and (max-width: 770px) {

    #main-info {
        position: absolute;
        top: 0;
        right: 0;
    }

    #topbar {
        display: none;
    }

    #main-pic {
        min-height: 391px;
        min-width: 600px;
        width: 100%;
        margin-bottom: 1rem;
        position: relative;
        right: -22vw;
    }

    #lower-text {   
        font-size: 21px;
        width: 305px;
        height: 178px;
    }
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
</head>

<body>
  <div class="container-fluid" style="margin: 0">
    <div id="topbar">
       <div class="row">
         <div class="col-sm-3">
           <span style="float: left;">Left</span>
         </div>
         <div class="col-sm-6">
           <span class="center">mid</span>
         </div>
         <div class="col-sm-3">
           <span class="right">right</span>
         </div>
      </div>
    </div>

    <div id="lower-text">
        <div class="row" style="margin: 0; padding:0;">
          <div class="col-xs-2 col-md-2"></div>
          <div class="col-xs-10 col-md-10" id="main-info" style=" margin: 0px; padding: 0px">
            <img id="main-pic" src="https://images.unsplash.com/photo-1558521958-0a228e77e984?ixlib=rb-1.2.1&w=1000&q=80">
            <span id="page-info">
              Some text
            </span> 
          </div>
        </div>
    </div>
  </div>
</body>
</html>

编辑：为澄清起见，我试图将图像从屏幕的右边缘稍微推开（所以我不显示完整图像，仅显示其中一部分），并希望保留可见部分适用于所有移动设备的图片，因此当我调整浏览器大小时，仍然看到图片的同一部分。另外-将.col-sm-2保留在图片空白的左侧。我希望现在可以更清楚了。

Answer 1

几件事。

您需要从图像本身中删除right CSS，以使文本和图像对齐。

为了将图像推送到屏幕之外，您可以执行类似我已包含的操作，在其中让您使用的Bootstrap 3类通过其push属性对其进行处理。您还可以在transform: translateX(____px) ID中添加#lower-text，以将图像和文本移出屏幕。

body {
  background-color: #ff0000 !important;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
  font-weight: 800;
}

#topbar {
  color: #fff;
  font-size: 21px;
  margin: 20px 0;
  text-align: center;
  font-weight: 500;
}

.center {
  font-size: 35px;
  text-align: center;
}

.right {
  float: right;
}

#lower-text {
  color: #fff;
  font-size: 68px;
  font-weight: 500;
  float: right;
}

#main-pic {
  width: 100%;
  margin-right: auto;
  margin-bottom: 50px;
  float: right;
}

@media only screen and (max-width: 770px) {
  #main-info {
    position: absolute;
    top: 0;
    right: 0;
  }
  #topbar {
    display: none;
  }
  #main-pic {
    min-height: 391px;
    min-width: 600px;
    width: 100%;
    margin-bottom: 1rem;
    position: relative;
  }
  #lower-text {
    font-size: 21px;
  }
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid" style="margin: 0">
    <div id="topbar">
      <div class="row">
        <div class="col-sm-3">
          <span style="float: left;">Left</span>
        </div>
        <div class="col-sm-6">
          <span class="center">mid</span>
        </div>
        <div class="col-sm-3">
          <span class="right">right</span>
        </div>
      </div>
    </div>

    <div id="lower-text">
      <div class="row" style="margin: 0; padding:0;">
        <div class="col-xs-12 col-xs-push-2" id="main-info" style=" margin: 0px; padding: 0px">
          <img id="main-pic" src="https://images.unsplash.com/photo-1558521958-0a228e77e984?ixlib=rb-1.2.1&w=1000&q=80">
          <span id="page-info">
              Some text
            </span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

将图像“推”到视口边缘之外

1 个答案: