如何让div内容响应？

我试图练习响应式设计。我想要做的是一个div内的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>

它不相当的工作.. 和想法如何archieve呢？

来源

2016-05-23 Akin Dönmez

使用按钮的相对位置和相对边距，如'' –

首先，你需要在钮删除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

，避免内嵌样式

来源

2016-05-23 13:16:41

首先，我建议不要使用线内样式，总是做一个外部样式表。

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

你可以阅读更多的在这里：

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; 
    } 
    }

来源

2016-05-23 13:15:37

float应该解决您的问题。

将float: right;添加到您的按钮并删除margin。

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

来源

2016-05-23 13:16:14 ilai

如何让div内容响应？

回答

相关问题