<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/* CSS Document */

/*
这种方法是借助于 负的 margin 来实现的。
1.首先在中间列定好固定值，因为此值是不会在改变的，接着对其进行左浮动；
2.那么关键地主是在左右边栏设置地方，这种方法是将其都进行50%的宽度设置，并加上 负的 左边距（此负的左边距最理想的值是中间栏宽度的一半加上1px ？？？）；
3.这样一来，左右边栏内容无法正常显示，那是因为对他们进行了负的左边距操作，现在需要在左右边栏的内层 div 中将其拉回来；

&lt;div class="DivLeftRightAutoMidFixHaveContent"&gt;
  &lt;div class="DivLeft"&gt;
    &lt;div class="DivLeftInner"&gt;左边显示的内容：如果左边没有显示的内容，则 DivLeftInner 可以不要，那么此处显示上层 DivLeft 的背景颜色，如果 DivLeft 没有设置背景颜色，则显示再上层 DivLeftRightAutoMidFixHaveContent 的背景颜色&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="DivMid"&gt;
    &lt;div class="DivMidInner"&gt;中间显示的内容：DivMidInner 可以不要，直接在 DivMid 中显示内容；如果中间部分由多个块构成，则可在此处添加多个 DivMidInner【也可以直接使用多个 DivMid 构成中间显示的内容】&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="DivRight"&gt;
    &lt;div class="DivRightInner"&gt;右边显示的内容：如果右边没有显示的内容，则 DivRightInner 可以不要，那么此处显示 上层的上层 DivLeftRightAutoMidFixHaveContent 的背景颜色【注意：DivRight 不能有背景颜色或内容，否则会覆盖 DivMid 中的右半部分】&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

注：IE不支持在CSS中使用变量
:root {
 --DivMidWidth:340px;
 --DivHeight:100px;
}

.DivLeftRightAutoMidFixHaveContent {
	position: relative;
	width: auto;

	min-width: 340px;
	
	height:100px;			如果有多次使用本样式的情况，则此处不能设置 height，需要在使用本样式的页面中为不同的 Div 单独设置

	min-width: var(--DivMidWidth);
	height: var(--DivHeight);
}
.DivLeftRightAutoMidFixHaveContent div {
	height: 100%;
	float: left;
}
.DivLeftRightAutoMidFixHaveContent .DivLeft, .DivRight {
	width: 50%;

	margin-left: -170px;	中间固定宽度 负的 一半

	margin-left: calc(var(--DivMidWidth)/-2);
}
.DivLeftRightAutoMidFixHaveContent .DivLeft .DivLeftInner, .DivLeftRightAutoMidFixHaveContent .DivRight .DivRightInner {
	margin-left: 170px;		中间固定宽度 正的 一半

	margin-left: calc(var(--DivMidWidth)/2);
}
.DivLeftRightAutoMidFixHaveContent .DivMid {
	width: 340px;			中间固定宽度

	width: var(--DivMidWidth);
}

*/


.DivLeftRightAutoMidFixHaveContent {
	position: relative;
	width: auto;
	min-width: 1340px;		/*1340 显示所有内容所需要的宽度之和*/
	/*height:900px;*/
}
.DivLeftRightAutoMidFixHaveContent div {
	/*height: 100%;*/
	/*float: left;*/
}
.DivLeftRightAutoMidFixHaveContent .DivLeft, .DivRight {
	float: left;
	width: 50%;
	margin-left: -670px;	/*-670 中间固定宽度 负的 一半*/
}
.DivLeftRightAutoMidFixHaveContent .DivLeft .DivLeftInner, .DivLeftRightAutoMidFixHaveContent .DivRight .DivRightInner {
	/*margin-left: 670px;*/		/*670 中间固定宽度 正的 一半*/
	margin: 0 0 0 670px;
}
.DivLeftRightAutoMidFixHaveContent .DivMid1 {
	float: left;
	width: 260px;			/*1340 中间固定宽度*/
	min-height: 655px;
	padding-top: 45px;
}
.DivLeftRightAutoMidFixHaveContent .DivMid2 {
	float: left;
	width: 980px;			/*1340 中间固定宽度*/
	padding-left: 100px;
	padding-top: 45px;
	min-height: 655px;
}
</pre></body></html>