如何逐步切断div

Question

如何切断＆＃34;外面＆＃34;或其他如div / img /某些元素，因为浏览器屏幕在＆＃34; A＆＃34;？

一张照片胜过千言万语，所以这里有一张照片...

A和A外部是同一个类。它只是外面是孩子们扩展的区域。

Answer 1

正如你所说，如果div的宽度是固定值，那么你可以很容易地使用@media查询。

@media (max-width=...px){
}

Answer 2

安德鲁不确定这是否是你想要完成的事情，但要看看这个小提琴 - https://jsfiddle.net/moojjoo/ppz8et2r/2/

我将宽度设为300px而不是100px。只需调整窗口大小即可查看效果。您的外部列将被隐藏。

HTML

"mySegue"

.container {
  width: 100%;
}

#left {
  width: 33%;
  float: left;
}

#middle {
  width: 33%;
  float: left;
}

#right {
  width: 33%;
  float: left;
}

@media screen and (max-width: 500px) {
  body {
    background-color: lightblue;
  }
  
  #left {
    visibility: hidden;
  }
  
  #middle {
    width: 100%;
    float: left;
  }
  
  #right {
    visibility: hidden
  }
  
}