Question

我曾经有一张桌子。一行或多行的集合构建一个组（类别）并获得特殊的背景颜色。该行的每个单元格都是要显示的产品。每个产品都应该有一个标题（产品名称）和一个有订购数量的页脚。

现在我需要为移动设备提供此功能。

产品图片每盒100x100（固定尺寸）。

如果移动设备的屏幕变窄，那么每行的4个产品应流入2x2甚至4x1。这个我不能再用桌子管理了。

我试过了：

    <div style="background-color:blue">
    <h3>Drinks</h3>
    <span class="box">
        one<br />
        <img src="notexist.gif" width="100" height="100"><br />
        Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span>

    <span class="box">
        two<br />
        <img src="notexist.gif" width="100" height="100"><br />
        Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span>

    <span class="box">
        three<br />
        <img src="notexist.gif" width="100" height="100"><br />
        Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span>
</div>
<div>
    <table>
        <tr bgcolor="purple">
        <td>one<br />
            <img src="notexist.gif" width="100" height="100"><br />
            Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span>
        <td>two<br />
            <img src="notexist.gif" width="100" height="100"><br />
            Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span>
        <td>three<br />
            <img src="notexist.gif" width="100" height="100"><br />
            Quantity: <input type='number' size='3' id='numberinput' name='mynumber' value='0' /></span>
        </tr>
    </table>
</div>

我所有的尝试都没有奏效。也许我走错了路。我该如何解决这一挑战？

Answer 1

你可以设置一个＆＃34; float：left＆＃34;到.box类，因此，一行中的框将调整为屏幕大小。

CSS：

.box{
     float: left;
}

我用＆＃34; float：left＆＃34;实现了你的例子。这里：

https://jsfiddle.net/dyao1dxm/

这是你的问题吗？

div和span而不是表格

1 个答案: