Question

我有一个连续两列的表。它在大窗户上工作正常，但在一个小窗口我想分开＆＃39;这两列分成不同的行。这样每行只有一列。我确实在JSFiddle（下面的代码）中看到了类似的情况，它使用@media屏幕和（max-width：500px）。但这个例子是关于段落的。

#dv-wrapper p {
  float: left;
  max-width: 50%;
}

@media screen and (max-width: 500px) {    
  #dv-wrapper {
    text-align: center;
  }

  #dv-wrapper p {
    float: none;
    text-align: left;
    display: inline-block;
  }
}

我不知道我的目标是否只能通过HTML和CSS来实现。有人可以帮我一把吗？

Answer 1

jsfiddle

你可能希望将你的段落包装成单独的divs，这样可以更容易控制 - 这将基本上在500px以下的屏幕上为你的段落提供100％的宽度 -

Answer 2

你可以试试这个..

<强> HTML

<div class="table_data">
    <dl>
        <dt>1-1</dt>
        <dd>1-2</dd>
    </dl>
    <dl>
        <dt>2-1</dt>
        <dd>2-2</dd>
    </dl>
</div>

<强>的CSS

dt, dd, dl {
    margin:0;
    padding:0;
    border-spacing:0;
}
dl {
    display:table;
    width:100%;
}
dt, dd {
    width:100%;
    display:block;
}
@media only screen and (min-width:768px) {
    dt, dd {
        width:50%;
        float:left;
    }
}

Fiddle Demo

HTML和CSS根据窗口大小更改表格布局

2 个答案: