html - 以一定的增量调整 div 的大小

Question

基本上我想根据页面大小增加 div 宽度，但我想一次将宽度增加 100 像素。我有办法做到这一点吗？

Answer 1

这是一种非常肮脏的方式...但它是纯 HTML 和 CSS>:D 这可能不是在所有情况下都可行...但总体思路是使用一系列内联 block 元素，它们被换行到下一行，但它们的父元素是溢出隐藏的，以掩盖这种情况正在发生的事实。可以在这些内联 block 元素之上使用一个单独的容器来容纳实际内容。

例子:

HTML:

<div class="modulo-fill">
  <div class="content">
    <p>
      TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    </p>
    <p>
      TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    </p>
    <p>
      TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
    </p>
  </div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
  <div class="fill"></div>
</div>

CSS:

.modulo-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  background-color: #ffffff;
  font-size: 0;
}
.modulo-fill > .content {
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  color: #ffffff;
  z-index: 2;
  font-size: 16px;
}
.modulo-fill > .fill {
  position: relative;
  display: inline-block;
  width: 100px; height: 100%;
  background-color: #800000;
  z-index: 1;
}

https://jsfiddle.net/gershy/hcmoq9et/3/

尝试在 jsfiddle 中调整右下框的大小以查看调整大小的效果。