文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在CSS中定位元素？

问如何在CSS中定位元素？
EN

Stack Overflow用户
提问于 2021-10-01 12:14:22
回答 2查看 111关注 0票数 0

我想要创建类似这的东西，但是我的代码已经完全不同了，我无法弄清楚原因。图像被放大并从div中消失。另外，如果我试图将图像向右移动，它就会向左移动。我想我把图像的定位部分弄糟了。我怎样才能解决这个问题，为什么会发生这种情况？这是我的代码：

​

代码语言：javascript
复制
#title {
  background-color: #916BBF;
}

.container-fluid {
  padding: 3% 15%;
}

/* Download Buttons */
.download-button {
  margin: 5% 3% 5% 0;
}

/* Title */
.title-img {
  width: 60%;
  transform: rotate(25deg);
  position: absolute;
}

#features {
  padding: 7% 15%;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.feature-box {
  text-align: center;
  padding: 5%;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- CSS bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <!-- JS bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <!-- CSS -->
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <!-- Title -->
  <section id="title">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div class="row">
      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>
    </div>
  </section>
</body>

</html>

​

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-10-01 12:52:42

我继续，把你的宽度从你的img class，并增加了一些风格。实现此外观的下一步将是在左侧包含h1和按钮，并提供左边的页边距。

编辑：

我还添加了一个col-sm-6引导类到您的col-lg-6，以使其移动响应。img类上的@media only screen允许您调整img，使其恰好定位在不同的设备上。

​

代码语言：javascript
复制
#title {
  background-color: #916BBF;
}

.container-fluid {
  padding: 3% 15%;
}

/* Download Buttons */
.download-button {
  margin: 5% 3% 5% 0;
}
/* Title */
 .title-img {
   transform: rotate(27deg);
   position: absolute;
   margin-top: 5rem;
   overflow-x: hidden;
  }

/* Title Responsive */
@media only screen and (max-width: 900px) {
.title-img {
    transform: rotate(27deg);
    position: absolute;
    margin-top: 5rem;
    right: 2rem;
    overflow-x: hidden;
}
}

#features {
  padding: 7% 15%;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.feature-box {
  text-align: center;
  padding: 5%;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- CSS bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <!-- JS bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <!-- CSS -->
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <!-- Title -->
  <section id="title">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6 col-sm-6">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6 col-sm-6">
          <img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div class="row">
      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-lg-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>
    </div>
  </section>
</body>

</html>

​

票数 1
EN

Stack Overflow用户

发布于 2021-10-01 12:29:19

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- CSS bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <!-- JS bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <!-- CSS -->
  <link rel="stylesheet" href="styles.css">
</head>
<style>
#title {
  background-color: #916BBF;
}

.container-fluid {
  padding: 3% 15%;
}

/* Download Buttons */
.download-button {
  margin: 5% 3% 5% 0;
}

/* Title */
.title-img {
  width: 60%;
  transform: rotate(25deg);
  position: relative;
}

#features {
  padding: 7% 15%;
  background-color: #fff;
  position: relative;
  z-index: 1;
  margin-top: -128px;
}

.feature-box {
  text-align: center;
  padding: 5%;
}

</style>
<body>
  <!-- Title -->
  <section id="title">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-google-play"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img class="title-img" src="https://www.transparentpng.com/thumb/-iphone-x/jPIkq8-iphone-glass-lens-screen-replacement-fixez.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>


  <!-- Features -->

  <section id="features">
    <div class="row">
      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>

      <div class="feature-box col-md-4">
        <h3>Lorem Ipsum</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
      </div>
    </div>
  </section>
</body>

</html>
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69405722

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档