Question

我的问题很简单。我正在使用div创建一个表。

.cstring
    _format: .asciz "%d\n"

.text
.globl _printNum

# assumes 16-byte aligned when called
# prints the value of the rax register
_printNum:
    push   %rbp         # save %rbp - previous stack base
    movq   %rsp, %rbp   # update stack base
    push   %rsi         # save %rsi - register
    push   %rdi         # save %rdi - register

    # print - already 16 byte aligned (rip and three values for 32 bytes)
    movq   %rax, %rsi            # load the value to print
    lea    _format(%rip), %rdi   # load the format string
    call   _printf

    # restore registers
    popq   %rdi
    popq   %rsi
    popq   %rbp

    # return
    ret

与以下css一起使用：

        <div class="table">

        <div class="row">
            <div class="cell">a</div>
            <div class="cell"><img src="..."></div>
            <div class="cell">b</div>
            <div class="cell">c</div>
            <div class="cell">d</div>
            <div class="cell">e</div>            
        </div>

        <div class="row">
            <div class="cell">a</div>
            <div class="cell"><img src="..."></div>
            <div class="cell">b</div>
            <div class="cell">c</div>
            <div class="cell">d</div>
            <div class="cell">e</div>            
        </div>

        <div class="row">
            <div class="cell">a</div>
            <div class="cell"><img src="..."></div>
            <div class="cell">b</div>
            <div class="cell">c</div>
            <div class="cell">d</div>
            <div class="cell">e</div>            
        </div>

    </div>

现在，当我使用小型（移动设备）设备时，我希望将“单元”全部堆叠在一起。

你可以帮助我扼杀我的@media css吗？

非常感谢你的帮助！

Answer 1

在@media for mobile中使用.cell{display:block}：

＆＃13;

.table { display: table; }
.row { display: table-row; border-bottom-style: solid; border-width: thick; }
.cell { display: table-cell; vertical-align: middle; padding: 0 10px 0 10px; }
@media (max-width: 767px) {
.cell{
  display:block
    }
 }

＆＃13;

<div class="table">

        <div class="row">
            <div class="cell">a</div>
            <div class="cell"><img src="..."></div>
            <div class="cell">b</div>
            <div class="cell">c</div>
            <div class="cell">d</div>
            <div class="cell">e</div>            
        </div>

        <div class="row">
            <div class="cell">a</div>
            <div class="cell"><img src="..."></div>
            <div class="cell">b</div>
            <div class="cell">c</div>
            <div class="cell">d</div>
            <div class="cell">e</div>            
        </div>

        <div class="row">
            <div class="cell">a</div>
            <div class="cell"><img src="..."></div>
            <div class="cell">b</div>
            <div class="cell">c</div>
            <div class="cell">d</div>
            <div class="cell">e</div>            
        </div>

    </div>

＆＃13;

当切换到小（例如移动）屏幕时，重新对齐div

1 个答案: