A variety of methods to achieve adaptive three-column layout

A variety of methods to achieve adaptive three-column layout

      Web development, often encounter around a fixed width, the width of the middle three-column layout adaptive, we described here are three common ways (on the order of page rendering is not required, such as requiring priority rendering the intermediate portion, and the layout of the venue Grail Flying wing)

method one:

html structure:

		<div class="box">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>

      First, in order of priority to bring about, we first thought float, then all left floating. In order to facilitate observation, we add background color

		.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
		.center{float: left;height: 300px;background-color: #DC143C;}
		.right{float: left;width: 300px;height: 200px;background-color: #FFFF00;}

      You can see, the middle part is not adaptive, we can use a new css3 properties cale. Equivalent of a calculator, the left and right sides of the width is lost in the middle of the width.

.center{float: left;height: 300px;background-color: #DC143C;width:calc(100% - 500px);}

      Here we must note the minus sign to have a space before and after.

Drawback: calc for the new c3 increased compatibility is not very good.

Method Two:

      The above method talked with floating, floating around this time we try, in the middle do not try to float method html structure with a second method.

		.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
		.center{height: 300px;background-color: #DC143C;}
		.right{float: left;width: 300px;height: 200px;background-color: #FFFF00;}

      This will cause a problem, the left floating out of the document flow will inevitably lead to the middle part up right floating forced line breaks.

      We can locate the right speaking to the upper right corner of the floating mobile browser, then use a characteristic bfc solution to the middle part and the left part of the problem of overlapping. I.e. bfc region does not overlap with the floating box. With overflow: hidden; you can, bfc other trigger here temporarily go into details.

		.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
		.center{height: 300px;background-color: #DC143C;overflow: hidden;}
		.right{float: left;width: 300px;height: 200px;background-color: #FFFF00;
				position:absolute;right: 0;top: 0;}

      Now and then just to give the intermediate region Add the declaration margin-right: 300px; can be achieved (in this case the right part of the absolute positioning from the document flow, and will not affect the margin-right.)
Disadvantages: more trouble, but compatibility ratio method a strong.

Method three:

      Html two methods just structures are left-right in order of priority, a change in the order in which the third method.
html structure:

		<div class="box">
			<div class="left">我是左边的部分</div>
			<div class="right">我是右边的部分</div>
			<div class="center">我是中间的部分</div>
		</div>

      Structure into a right and left. If we are left to float an element left, to the right of the right floating elements, then the middle will naturally go up, so now as long as the intermediate region becomes bfc, the page will become a three-column layout we want.

			.left{float: left;width: 200px;height: 200px;background-color: #7FFF00;}
			.center{height: 300px;background-color: #DC143C;overflow: hidden;}
			.right{float: right;width: 300px;height: 200px;background-color: #FFFF00;}

Advantages: simple, easy to implement;
disadvantages: the need to change the layout of the page, becomes about layout.