Question

基本上我想根据页面大小增加div的宽度，但我希望一次增加100px的宽度。有没有办法可以做到这一点？

Answer 1

这是一种非常肮脏的做法...但它是纯HTML和CSS＆gt;：D 这可能在所有情况下都不可行...但是一般想法是使用一系列内联块元素，这些元素被包装到下一行，但是它们的父元素是溢出隐藏的，以掩盖这种情况发生的事实。可以在这些内联块元素的顶部使用单独的容器来保存实际内容。

示例：

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中右下角的框以查看调整大小效果。

Answer 2

使用CSS媒体查询，您可以设置每100px发生的“断点”。

http://codepen.io/CKH4/pen/rxdeoV?editors=110 这是CSS：

.element {
  width: 100px;
}

@media (min-width: 200px) {
  .element {
    width: 200px;
  }
}

@media (min-width: 300px) {
  .element {
    width: 300px;
  }
}

@media (min-width: 400px) {
  .element {
    width: 400px;
  }
}

@media (min-width: 500px) {
  .element {
    width: 500px;
  }
}

@media (min-width: 600px) {
  .element {
    width: 600px;
  }
}

等等，等等。这是很多代码，但它可以保持你的html标记干净。

如果您使用的是CSS预处理器，则可以自动执行此操作。以下是一些预处理器示例。

书写笔： http://codepen.io/CKH4/pen/VeXaEW?editors=110

for i in (2..40)
  @media (min-width: (i * 100px))
    .element
      width (i * 100px)

萨斯： http://codepen.io/CKH4/pen/vLRGqp?editors=110

@for $i from 2 through 40
  @media (min-width: ($i * 100px))
    .element
      width: ($i * 100px)

SCSS： http://codepen.io/CKH4/pen/OMvNYo?editors=110

@for $i from 2 through 40 {
  @media (min-width: ($i * 100px)) {
    .element {
      width: ($i * 100px);
    }
  }
}

减： http://codepen.io/CKH4/pen/obqLgG?editors=110

.break-at-100(@i) when (@i > 1) {
  .break-at-100((@i - 1));
  @media (min-width: (@i * 100px)) {
    .element {
      width: (@i * 100px);
    }
  }
}

body {
  .break-at-100(40)
}

以某些增量调整div的大小

2 个答案: