响应式元素

问题描述：

我有下面的代码，我试图让所有的元素相邻的元素在窗口大小发生变化时能够响应。我不介意他们只要彼此相邻，他们就会变小。我的想法是使用媒体查询，但在这方面并不是很成功。响应式元素

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/

请发布您的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; 
}

答

这是media query一个简单的用法。当你调整窗口的大小时，列数将减少width。我认为你不能使用媒体查询，因为内联样式。

根据w3school：

一般来说，我们可以说，所有的风格将“连带”到一个新的“虚拟”的样式表由以下规则，其中头号具有最高的优先级：

内嵌式（HTML元素内部）外部和内部样式表（在头部部分）浏览器的默认

Jsfiddle

相关推荐