响应元素

Question

我有以下代码，并且我试图在窗口大小改变时使所有彼此相邻的元素响应。我不介意他们变小，只要他们彼此相邻。我的想法是使用媒体查询，但在该领域并不是很成功。

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/

Answer 1

看看这个小提琴......这就是你想要的吗？

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

Answer 2

这是media query的简单用法。调整窗口大小时，width列将减少。我认为由于内联样式，您无法使用媒体查询。

根据w3school：

  

一般来说，我们可以说所有的风格都是＆＃34;级联＆＃34;成   一个新的＆＃34;虚拟＆＃34;样式表按以下规则排列，名列第一   优先级最高：

     

内联样式（在HTML元素内）外部和内部样式   工作表（在head部分中）浏览器默认

Jsfiddle