div adaptive width_html/css_WEB-ITnose

For div adaptive width, the online saying is basically to put the div to be adaptive width at the end of other fixed widths, without specifying its float attribute or specifying the float attribute as none, such as a three-column layout The center column is adaptive width, so you can define a three-column div like this:

<div id="left" style="float:left;width:100px;">这是左栏</div><div id="right" style="float:right;width:100px;">这是右栏</div><div id="center" style="float:none;width:auto;">这是中栏，且自适应宽度</div>

The effect is as follows:

But if When we increase the text content of the middle column and add borders and background colors to it, we will find the problem:

<div id="left" style="float:left;width:100px;">这是左栏</div><div id="right" style="float:right;width:100px;">这是右栏</div><div id="center" style="float:none;width:auto;background-color:#dddddd;border:1px solid #999999;">这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。</div>

The result is as follows:

You can see that only the content in the middle column whose height is smaller than the left and right columns will adapt to the width. If it exceeds the height of the left and right columns, it will be out of control, and its real width is still 100%. This can be seen from the background and borders.

But since it can allow two floating columns to be on the left and right side of it, and it is in harmony with the left and right columns, there is another solution, which is to specify the left and right padding of the middle column, as the two side columns. There is room for the columns, and the content itself does not have to worry about being out of control due to exceeding the height of the left and right columns. If the part that needs adaptive width has a background and border, you can add another sub-div in the middle column and specify the border and background for it. The code is as follows:

<div id="left" style="float:left;width:100px;">这是左栏</div><div id="right" style="float:right;width:100px;">这是右栏</div><div id="center" style="float:none;width:auto;padding:0 100px;">    <div id="inner" style="background-color:#dddddd;border:1px solid #999999;">        这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。这是中栏，且自适应宽度。    </div></div>

Effect As follows: