将容器放置在桌面上“水平偏离中心”；为移动设备“集中”平滑缩小规模[关闭]

问题描述 投票：0回答：1

我正在尝试制作一个简单的响应式页面。

  • 在移动设备上，事物会精细缩小、居中并适合窗口宽度。

  • 在桌面上，容器和内容会缩放至最大宽度，但始终在屏幕上水平居中。

在浏览器宽度允许的情况下，我希望容器 div 位于距视口侧不同的距离处。例如右侧 %5，还是左侧 8%？为了设计美学。

我尝试过在 vh 宽度上使用 calc 和媒体查询之类的方法，但是当浏览器缩小时，如果图像不被切断，或者尺寸发生大的“跳跃”，我就无法让它工作。图像总是在两侧被切断，有什么想法吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basura</title>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  
  
  <style>
    body {
      background-color: whitesmoke;
      margin: 20px; 
      padding: 0;      
      font-family: 'Times New Roman', Times, serif;
      font-size: 16px;
      line-height: 1.2;
    }

    /* Link styles */
    a {
      color: blue; /* Set link color to blue */
      text-decoration: none; /* Remove default underline */
    }

    /* Hover and active link styles */
    a:hover,
    a:active,
    a:focus {
      text-decoration: underline; /* Underline link on hover, click, or focus */
    }

    .container {
      background-color:;
      margin-bottom: 80px;
      padding: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; /* Change flex direction to column */
      position: relative; /* Add position relative */
      margin-top: 0px; /* Add margin-top for spacing */
    }


    /* Custom CSS for text boxes */
    .textbox {
      background-color: white;
      max-width: 600px;
      padding: 10px;
      margin-top: 20px; /* Add margin-top for spacing */
      margin-left: auto; /* Align to the right */
      margin-bottom: 0px; /* Add margin-bottom for spacing */
      text-align: left; /* Align text to the left */
    }


  </style>
</head>

<body>

  <div class="container first-container" style="max-width: 1000px">
    <div style="background-color: lightgreen; width: 100%">
<center><img src="https://source.unsplash.com/random?car" style="max-width: 100%"></center></div>

    <div class="textbox">
      Lorem ipsum
    </div> 
  </div>

  <div class="container second-container" style="max-width: 800px">
    <div style="background-color: orange; width: 100%">
<center><img src="https://source.unsplash.com/random?cat" style="max-width: 100%"></center>
    </div>

    <div class="textbox">
      Lorem ipsum
    </div> 
  </div>



</body>
</html>

html css responsive-design
1个回答
0
投票

您可以通过使用 CSS 媒体查询以及 

margin-left
和 
margin-right
属性来实现此目的。我在下面给出了一些 CSS 应该有助于解决这个问题。如果您有任何疑问，请告诉我。

HTML/CSS：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basura</title>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  
  <style>
    body {
      background-color: whitesmoke;
      margin: 20px; 
      padding: 0;      
      font-family: 'Times New Roman', Times, serif;
      font-size: 16px;
      line-height: 1.2;
    }

    /* Link styles */
    a {
      color: blue; /* Set link color to blue */
      text-decoration: none; /* Remove default underline */
    }

    /* Hover and active link styles */
    a:hover,
    a:active,
    a:focus {
      text-decoration: underline; /* Underline link on hover, click, or focus */
    }

    .container {
      background-color:;
      margin-bottom: 80px;
      padding: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; /* Change flex direction to column */
      position: relative; /* Add position relative */
      margin-top: 0px; /* Add margin-top for spacing */
    }

    /* Custom CSS for text boxes */
    .textbox {
      background-color: white;
      max-width: 600px;
      padding: 10px;
      margin-top: 20px; /* Add margin-top for spacing */
      margin-left: auto; /* Align to the right */
      margin-bottom: 0px; /* Add margin-bottom for spacing */
      text-align: left; /* Align text to the left */
    }

    /* New CSS */
    @media (min-width: 768px) { /* Adjust this value based on when you want to apply these styles */
      .first-container {
        margin-right: 5%; /* 5% from the right */
      }

      .second-container {
        margin-left: 8%; /* 8% from the left */
      }
    }
  </style>
</head>

<body>

  <div class="container first-container" style="max-width: 1000px">
    <div style="background-color: lightgreen; width: 100%">
<center><img src="https://source.unsplash.com/random?car" style="max-width: 100%"></center></div>

    <div class="textbox">
      Lorem ipsum
    </div> 
  </div>

  <div class="container second-container" style="max-width: 800px">
    <div style="background-color: orange; width: 100%">
<center><img src="https://source.unsplash.com/random?cat" style="max-width: 100%"></center>
    </div>

    <div class="textbox">
      Lorem ipsum
    </div> 
  </div>

</body>
</html>

顺便说一句，不确定这是否是故意的，但

background-color:;
没有任何价值。这没什么大不了的，但我想我会指出这一点。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.