Question

Hellow我的网站有问题。我正在编写响应式布局，我的肖像模式有问题。我的网站在这里 - www.szafortest.pl

您可以在webbrowser中查看css和html代码。如果你想我可以把代码放在这里。我的问题是我的白色边缘很大。请参考下图。 enter image description here

我想做的是调整“textContent”类的大小。我尝试使用视口但总是能找到会严重显示此网站的设备。

你知道有什么好的解决方案吗？

Answer 1

正如James Newton在评论中建议的那样，您可以使用flexbox来解决此问题。我有一个库，允许我使用flexbox在行和列中定位元素。它们的名称为flex-row和flex-column。名字应该说明一切。还有一个名为autoflex的重要类。它允许我均匀地填充div或大小div的剩余空间。这是您可以尝试的解决方案：
HTML：

<body class="flex-column">
    <div class="yourContent"></div>
    <div class="autoflex"></div> <!--This will fill all whitespace -->
</body>

CSS：

.flex-column {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;  
}

.flex-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;  
}

.autoflex {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}

修改
这些类仅支持标准和webkit浏览器。为了使其与其他浏览器更兼容，您应该将-moz-flex添加到属性中。

调整div的大小以适合纵向模式

1 个答案: