如何讓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內容響應？

回答

相關問題