html - 如果屏幕宽度低于指定量，如何响应式修剪 div 的左侧和右侧？

Question

我正在寻找修剪 div 的左侧和右侧，假设它是一个 500px x 500px 方形 div，当您缩放浏览器时。本质上，它应该在您缩放时在左侧和右侧平等地修剪这个 div当浏览器小于 1300px 时，它应该开始出现。

<div class="trim-my-left-and-right"></div>

.trim-my-left-and-right {
    width: 500px;
    height: 500px;
}

Answer 1

我不确定您所说的“修剪左侧和右侧”是什么意思。body但是您可以通过根据标签或其他容器的宽度设置百分比宽度来创建响应式宽度。min-width如果您想将其保持在特定宽度以上，您可以应用属性。但是，您可能需要调查min-width和的浏览器兼容性max-width。

div#container {
  position:relative;
  width:100%;
  height:100%;
  padding:0px;
  max-width:700px;
  margin:0px auto;
  background-color:#AAA;
}

.trim-my-left-and-right {
  position:relative;
  width:50%;
  height: 500px;
  background-color:#000;
  margin:0px auto;
}

http://jsfiddle.net/9ypKp/