Use Min-width (CSS) in IE)

Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. However, ie does not recognize it, so if you use IE to scale down the window width of the blog garden to small enough, all the words will be changed to one column.

A common solution is to use the expressions of JavaScript or IE.

Here I will try to use CSS to solve this problem.

Suppose we need a div whose Min-width is PX.

Step 1

< Div Style = "Border-left: 300px solid # FFF; Height: 1px" > </ Div >

Set the left border to PX, and the border color is the same as the background color of the page, and the height is set to 1. Otherwise, the DIV will be invisible.

Step 2
In the above Div, add the followingCode

< Div Style = "Margin-left:-300px; position: relative; Height: 1px ;" > </ Div >

The positioning method is set to relative (the object cannot be stacked), and the object margin-left (the outer patch on the left) is set to-300px.
In this way, the DIV will return to the origin, instead of starting from 300px,

Analysis

Because border-left is PX, the minimum DIV size must be PX, which indirectly implements the Min-width function.
Because margin-left is-300px and position: is relative, the text in it is not affected by border-left.

The complete code is as follows:

< Div Style = "Border: 1px solid red; width: 90% ;" >
  < Div Style = "Border-left: 300px solid # FFF; Height: 1px ;" >
< Div Style = "Margin-left:-300px; position: relative; Height: 1px ;" >
Width 90%, minimum width PX;
Minimum height 300%
</ Div >
  </ Div >
</ Div >