Question

我正在尝试练习响应式设计。我想要做的是div内部和一个按钮的div。按钮完全正确，跨度完全保留。当我尝试调整窗口大小时，由于div的大小，按钮和跨度应该更接近。到目前为止我所做的是：

<div style="background-color: white; width: 50%; height: 50px; border-bottom-style: solid; border-bottom-width: 0.5px"><span>My Word</span>
     <button style="height: 50px; width: 50px; position absolute; margin-left: 268px"></button></div>

它不起作用.. 想法如何实现这个目标？

Answer 1

首先，我建议不要使用内嵌样式，总是制作外部样式表。

有很多方法可以做出响应式设计，媒体查询就是一个例子。

您可以在此处阅读更多内容：

How to make a DIV element responsive

 @media screen and (min-width:761px){
        body{
        background-color:white;
    }
     h1{
        color:red;
    }    
    }

    @media screen and (max-width:760px){
           body{ background-color: #333;
        }
     h1{
        color:red;
    }  
    p{
        color: white;
    }
    }

    @media screen and (max-width:480px){
           body{ background-color: #807f83;
        }
     h1{
        color:white;
    }  
    p{
        color: white;
    }
    }

    @media screen and (max-width:360px){
           body{ background-color: #0096d6;
        }
     h1{
        color:white;
        font-size:25px;
    }  
    p{
        color: white;
    }
    }

Answer 2

float应该可以解决您的问题。

将float: right;添加到您的按钮，然后移除margin。

<button style="height: 50px; width: 50px; position absolute; float: right;"></button>

Answer 3

首先，您需要删除按钮上的position absolute;并将其替换为float: right"，然后在div上添加position: relative以满足按钮和跨度。

<div style="background-color: white; width: 50%; height: 50px; border-bottom-style: solid; border-bottom-width: 0.5px; position: relative">
  <span>My Word</span>
  <button style="height: 50px; width: 50px; float: right">button</button>
</div>

因为你想学习响应式设计，我想你应该访问

Responsive web design basics | Web Fundamentals

Responsive Web Design: What It Is and How To Use It

并避免内联样式

如何使div内容响应？

3 个答案: