Question

我花了两天时间疯狂地谈论如何响应一些html元素。基本上，我试图实现的效果是该站点在现场服务管理和智能路线规划＆amp;车队管理部门：

这两部分都有两部分。一方面是具有固定像素长度但在各个断点处尺寸缩小的图像。另一方面是h1，p和按钮元素，当图像尺寸缩小时，它们保持完全相同的位置。我已经尝试通过绝对定位包含在一起的元素来重新创建这个效果，但是这个解决方案不起作用，因为一边的边距必须设置得如此之高，以至于它最终挤压并将html元素推得太远。

当图像根据媒体查询缩小时，如何确保html元素（h1，p和按钮）不受影响？我非常感谢任何见解。

我目前的代码是：

.btn-primary {
    background-color: #de6426 !important;
    border-color: #de6426 !important;
    color: #fff;
  }
  
  .btn-primary:hover {
    background-color: hsla(20, 74%, 41%, 1) !important;
    border-color: hsla(20, 74%, 41%, 1) !important;
    color: #fff;
  }
  
  .btn-primary.focus, .btn-primary:focus {
     background-color: hsla(20, 74%, 41%, 1) !important;
     border-color: hsla(20, 74%, 41%, 1) !important;
     color: #fff;
  }

body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: row;
  }

  @media screen and (max-width: 792px) {
    .container {
        display: flex;
        flex-direction: column;
    }
  }

  .fleet {
      width: 400px;
  }

.items-wrapper {
    display: flex;
    background-color: #0f2c4d;
}

.items {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    text-align: center; 
    margin-left: 50px; 
    min-width: 390px;
    max-width: 500px;
}

  h1 {
      margin: 0;
      color: #008ad1;
  }

  p {
    color: white;
    margin-left: 6rem;
    margin-right: 6rem;
  }

  .btn {
      height: 30px;
      width: 80px;
  }

  h1 {
    font-family: Carnas-Light;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <title>Document</title>
</head>
<body>
        <div class="container">
                <div class="items-wrapper">
                        <div class="items"> 
                            <h1>Intelligent Route Planning & Fleet Management</h1>
                            <p>Improve efficiency and scalability of fleet operations through dynamic planning, intelligent route optimization and more.</p>
                            <button type="button" class="btn btn-primary">Button</button>
                        </div> 
                </div>
                    <img class="fleet" src="https://i.imgur.com/UakU07V.png" alt="Mountain View">
        </div> 
</body>
</html>

Answer 1

好的，你添加了太多HTML / CSS标记，这在这里并不是必需的。另外，如果你想使用flexbox网格模型，为什么（只是问问自己）同时使用Bootstrap？

代码权利。在HTML示例中，只需使标记更精简，并将flex应用于外部容器，以便可以根据需要设置文本元素和图像的样式和缩放。

<div class="container">
    <div class="items-wrapper">
            <h1>Intelligent Route Planning & Fleet Management</h1>
            <p>Improve efficiency and scalability of fleet operations through dynamic planning, intelligent route optimization and more.</p>
            <button type="button" class="btn btn-primary">Button</button>
        </div>
    <div class="img-wrapper">
        <img class="fleet" src="https://i.imgur.com/UakU07V.png" 
        alt="Mountain View">         
   </div>
</div>

接下来到你的CSS文件。

/* generic styles */

body {
margin: 0;
} 

h1 {
margin: 0;
color: #008ad1;
font-family: Carnas-Light;
}

p {
color: white;
margin-left: 6rem;
margin-right: 6rem;
}

.btn {
height: 30px;
width: 80px;
margin-top: 20px;
}

.btn-primary:hover {
background-color: hsla(20, 74%, 41%, 1) !important;
border-color: hsla(20, 74%, 41%, 1) !important;
color: #fff;
}

/* Container Flex  */

.container {
width: 100%;
background-color: #0f2c4d;
display: flex;
flex-direction: row;
flex-flow: nowrap;
align-items: center;
justify-content: center; 
text-align: center; 
}

.items-wrapper, .img-wrapper{
 width: 50%;
}

.items-wrapper {
 padding: 10px;
}

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

 .container {
    display: block;
  }

 .items-wrapper, .img-wrapper{
   width: 100%;
 }
}

请注意，您可以根据自己喜欢的视口大小调整媒体查询。我刚刚将它设置为600px来演示这个概念。

See Proof of Concept in this JSBIN here

如何以响应的方式绝对定位HTML元素

1 个答案: