html - 多个 div 首先在线并根据屏幕大小强制下一对下一行？

Question

多个 div，每个都有一个标签和一个下拉列表。强制下拉菜单/标签对始终位于同一行，并根据屏幕大小强制下一对下拉到下一行的最简单方法是什么？

到目前为止我有:

<div style="display:inline-block; vertical-align:middle; width:100%;">
    <div style="float:left; width:40%; display:block;">
        <label for="zone"><b><%=zonestr%></b></label> 
        <select id="zone" name="zone" onchange="getDIV();start();">
            <option value=""><%=selectstr%><%=zonestr%></option>
            <option value="1">value1</option>
            <option value="2">value2</option>
            <option value="3">value3</option>
        </select>
    </div>
    <div style="float:left; width:60%;">
        <label for="district"> <b><%=resultstr%></b> </label>
        <select id="district" name="district">
            <option value=""><%=selectstr%><%=resultstr%></option>
            <option value=""></option>
        </select>
    </div>
</div>

Answer 1

您可以根据 codepen 链接使用引导网格: codepen.io/greatzspido/pen/YrvQry

如果你不想包含完整的 Bootstrap ，你可以使用 https://neat.bourbon.io/ 的终极轻量级网格结构。 .