響應式元素

我有下面的代碼，我試圖讓所有的元素相鄰的元素在窗口大小發生變化時能夠響應。我不介意他們只要彼此相鄰，他們就會變小。我的想法是使用媒體查詢，但在這方面並不是很成功。響應式元素

HTML：

<div style="float:left"> 
    <div >Testing Responsivness</div> 
</div> 
<div style="float:left"> 
    <input type="number" class="theInput" min="1" /> 
    <label ><strong class="q-d-currency">&nbsp; $ </strong> </label> 
</div> 
<div > 
    <button type="submit" ></button> 
</div>

https://jsfiddle.net/rft1y94v/

來源

2015-11-05 Luana Farrugia

請發佈您的jsfiddle。 – Alex

你的代碼有什麼問題？ – Alex

沒有什麼是真正的錯誤我只想把所有的元素放在一起，當窗口大小減少，而不是相互之間的下降。即使這樣emans我會讓他們更小 –

看看這個小提琴...這是你想要的嗎？

Fiddle

HTML：

<div class="block1"> 
     <div style="display:inline-block;" >Testing Responsivness</div> 
    </div> 
    <div class="block2"> 
     <input type="number" class="theInput" min="1" /> 
     <label ><strong class="q-d-currency">&nbsp; $ </strong> </label> 
    </div> 
    <div class="block3"> 
     <button type="submit" >submit</button> 
    </div>

CSS

.block1{ 
    width:33%; 
    display:inline-block; 
    float:left; 
    word-break: break-all; 
} 

.block2{ 
    width:33%; 
    display:inline-block; 
    float:left; 
} 

.block3{ 
    width:33%; 
    display:inline-block; 
    float:left; 
}

來源

2015-11-05 14:40:56 prdtuty

這是media query一個簡單的用法。當你調整窗口的大小時，列數將減少width。我認爲你不能使用媒體查詢，因爲內聯樣式。

根據w3school：

一般來說，我們可以說，所有的風格將「連帶」到一個新的「虛擬」的樣式表由以下規則，其中頭號具有最高的優先級：

內嵌式（HTML元素內部）外部和內部樣式表（在頭部部分）瀏覽器的默認

Jsfiddle

來源

2015-11-05 14:41:10 Alex

回答

相關問題