Question

我正在尝试使用2行2列创建包含3个部分的元素div。

.flex-row {
    flex-direction: row;
    display: flex;
    width: 310px;
}

.flex-column {
    flex-direction: column;
    display: flex;
}

.flex-body {
    display: flex;
    margin: 40px 10px 0px 0px;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 260px;
    width: 764px;    
}

<div class="flex-body">
  <div class="flex-row">
    <div style="background: #0980cc;"></div>
  </div>
  <div class="flex-column">
    <div style="background: #09cc69;"></div>
    <div style="background: #cc092f;"></div>
  </div>
</div>

我设置宽度是因为如果不这样做，宽度将不适合页面。

但是，div没有响应。我已经尝试过，但是没有任何效果。任何人都可以帮助我使div响应屏幕分辨率吗？

谢谢

Answer 1

我刚刚创建了一个使用百分比的版本：

['0', '4', '8', '18', '20', '5', '0', '4']
['1', '13', '16', '6', '11', '13']
['2', '3', '1', '10', '9', '2', '15', '3']
['3', '13', '12', '16', '13']
['4', '13', '11', '17', '14', '7', '13']

jsfiddle link

如何使DIV元素响应屏幕分辨率

1 个答案: