Home > Article > Web Front-end > The width of the left and right columns is adaptive, and the width of the middle column is fixed_html/css_WEB-ITnose
The width of the left and right columns is adaptive, and the width of the middle column is fixed_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:191226browse
The width of the left and right columns is adaptive, and the width of the middle column is fixed:
The width of the middle column is fixed, and the width of the left and right columns is adaptive. The effect of adaptive width is used in many web pages and has good uses. The following is a brief introduction to how to achieve this effect:
The code example is as follows:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">*{ margin:0; padding:0;}body { font-family:Verdana, Arial, Helvetica, sans-serif; min-width:620px;}#left,#right { float:left; width:50%; margin:0 0 0 -151px;}#innerLeft,#innerRight{ margin:0 0 0 151px; background-color:#efefef;}#middle { float:left; width:300px; background-color:#ccc;}.inner { padding:12px;}</style></head><body><div id="left"> <div id="innerLeft" class="inner">左栏</div></div><div id="middle"> <div id="innerMiddle" class="inner">中栏</div></div><div id="right"> <div id="innerRight" class="inner">右栏</div></div></body></html> The above code achieves this effect. You can adjust the size of the window for testing. Here is a brief introduction on how to achieve this effect:
1. Implementation principle:
1. Set the margins of the left and right columns to -150px, so that between the left and right columns Set aside the position of the middle column, with a width of 300px.
2. Then set the left margin of the child divs in the left and right columns to 150px, so that the content of the left and right columns can be displayed in the "-150px margin area" of the non-parent element.
Based on the above principles, the middle fixed and width adaptive effect of the left and right columns are achieved.
2. Explanation of knowledge points:
1. According to the implementation principle, the value of the left and right margins should be -150px, but the actual value is indeed -151px. This is because IE6 and IE7 browsers The percentage of width seems not to be ideal, so you need to increase the margin size by one pixel, otherwise line breaks may occur.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/509.html