如何将所有设备的特定位置的元素设置为响应式答案

【问题标题】：how to set element in a specific position for all devices as responsive如何将所有设备的特定位置的元素设置为响应式
【发布时间】：2021-05-17 01:37:15
【问题描述】：

我有一个网络应用程序，它将成为智能手机的应用程序。所以它一定太敏感了。现在我的问题：

我有一个父级 div 和 4 个子级。我想放下最后一个，直到它与父级的底部边框形成如下所示的视觉效果：

-----(内容)-----

[这是我得到的结果 For a specific Resolution 。我希望它适用于所有分辨率：

我是否应该为此向父母添加“身高”？

有一个简单的代码。我怎样才能使它像我为所有分辨率附加的图像？

<style>
    #parent{
        border-bottom : 2px solid;
    }
    #child{
        pading:10px;
        border-radius:30px;
    }
</style>

和这样的html：

<div id="parent">
    <span style="">
         Content
    </span>
</div>

【问题讨论】：

能否提供您的代码？，您的问题不清楚。
@Ako 不简单。我为此添加了一个示例。请看我添加的图片并指导我如何制作。
我会回答您的问题，但您必须添加代码并说明问题所在。要了解如何提问，请阅读：stackoverflow.com/help/how-to-ask

标签： html css css-position css-transforms css3pie

【解决方案1】：

这样做：

    .parent {
      position: relative;
      height: 200px;
      width: 100%;
    }

    .content {
      border: 2px solid tomato;
      padding: 10px;
      border-radius: 30px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: white
    }

    .line {
      width: 100%;
      position: absolute;
      border-bottom: 2px solid tomato;
      bottom: 20px;
    }

  <div class="parent">
    <div class="line"></div>
    <div class="content">
      Content
    </div>
  </div>

【讨论】：