html - 响应元素

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 ......这是你想要的吗？

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