Question

我有三个div列格式的div，它们的宽度占窗口的百分比。一旦屏幕达到1300像素或更小，我希望最右边的两个div不再变小，基本上超过最左边的div（右边和中间的div中会有内容，而左边的div中没有内容）。我做了一个媒体查询，说当屏幕达到1300px时，左div的宽度变为0，中间和右边的宽度固定，向右浮动。但是，当我这样做时，中间和右边的div总是切换位置，以便中间的div一直向右移动，而右边的div则跳到中间的左侧。如何阻止两个div切换位置？

我尝试将div的显示更改为块或内联，但没有任何效果。

.column {
  float: left;
  padding: 10px;
  height: 600px;
  display: inline-block;
}

.left {
	width: 20%;
	background-color: red;
}

.middle {
	width:60%;
	background-color: orange;
}

.right {
	width:20%;
	background-color: yellow;
}


@media screen and (max-width: 1300px) {
	.left {
		width: 0px;
	}
	.middle {
		width:765px;
		float: right;
	}
	.right {
		width: 255px;
		float: right;
	}
}

<div class="columns">
	<div class="column left"></div>
	<div class="column middle">
		<h3>Lorem Ipsum </h3>
	</div>
	<div class="column right">
		<div class="form-box"></div>
	</div>
</div>

窗口小于1300像素后，我只希望中间和右边的列向右浮动，中间的列在右边的左侧，但是它们总是切换位置。

Answer 1

您将更适合使用var regexPattern = @"[\p{S}\p{P}]";来完成您想做的事情。另外，您使用CSS类flexbox代替了CSS中的.column定义。

尝试一下：

.columns

.columns {
  padding: 10px;
  height: 600px;
  display: flex;
  flex-direction: row;
  /*flex-wrap: wrap;*/
}

.left {
  flex: 1 1 auto;
  width: 20%;
  background-color: red;
}

.middle {
  flex: 1 1 auto;
  width: 60%;
  background-color: orange;
}

.right {
  flex: 1 1 auto;
  width: 20%;
  background-color: yellow;
}


@media screen and (max-width: 1300px) {
  .left {
    display: none;
  }
  .middle {
    width: 500px;
    flex: 1 0 auto;
  }
  .right {
    width: 500px;
    flex: 1 0 auto;
  }
}

/*@media screen and (max-width: 650px) {
  .middle {
    width: 100%;
  }
  .right {
    width: 100%;
  }
}*/

两个div保持切换位置-如何停止此操作？

1 个答案: