CSS Problem Collection

1. Specify the width and height

The requirement is to set the picture square, using the following CSS to find that the width height is not 1:1, view the calculated result 81.125*93.750: Vote-img-item for the DIV is this wide-height,

<Divclass= "Vote-content">    <Divclass= "Vote-img-item">        <img_src= "/data/uploads/2017/11/13/9d16d0eca2daa622f0b33b5cae1d8ed9.jpg"src= "/data/uploads/2017/11/13/9d16d0eca2daa622f0b33b5cae1d8ed9.jpg">                        </Div>    <Divclass= "Vote-f-item">Pecan + Almond + Peach kernel + pine nuts + cashew nuts + melon seeds + peanuts</Div></Div></Div>

Css:

. Vote-content{position:relative;Display:-webkit-box;Display:-webkit-flex;Display:Flex;Min-height:44px;padding:10px 15px;-webkit-box-pack:Justify;-webkit-justify-content:Space-between;justify-content:Space-between;-webkit-box-align:Center;-webkit-align-items:Center;Align-items:Center;}. Vote-img-item{Flex:1 1 Auto;width:50%;Height:2.5rem;width:2.5rem;}. Vote-img-item img{Height:100%;width:100%;}

The code that produces this problem is the. Vote-img-item style of flex:1 1 auto; in Flex layout Flex-grow: 1;   flex-shrink: 1; You can zoom in and out, as long as the settings do not let the flex layout of the children zoom in and out, that is, flex:0 0 auto;.

2.img labels are spaced

Code:

IMG Tag Display:inline, similar to text, Latin in a row display is not completely vertical center, is the baseline to it, is perpendicular to the middle of the lower point (the bottom of it, you can see the above img), so here IMG looks at the top of a little interval, can be changed to display: Block

3.table width

Problem: After setting the width, it is less than a certain width and its size will no longer change.

Figure A automatic layout when there is a span display when there is a space between the continuous text of the goods, here are two columns display

Figure B Auto-Layout, the P-label text does not have a white space character when the column is displayed.

Cause: The default is Automatic table layout, where the text in the cell is wrapped in multiple single-line labels (or anonymous text), that is, the text is contained separately and is contained by a separate label or (only in an anonymous row box, and there is no white space in the text (using   ID, testing in Chrome is showing figure a , manually pressing the SPACEBAR to show as Figure B) has different layouts for the text. The real reason unknown origin?

Workaround: The width of the table-layout:fixed;table can be scaled to the corresponding size according to the set value.

Fixed table layout:
Fixed table layouts allow the browser to layout the table more quickly than the automatic table layout.
In a fixed table layout, the horizontal layout depends only on the table width, column width, table border width, cell spacing, and the contents of the cell.
By using a fixed table layout, the user agent can display the table after the first row has been received.

Automatic table layout:
In an automatic table layout, the width of a column is set by the widest content in the column cell that does not have a row.
This algorithm is sometimes slower, because it needs to access all the content in the table before determining the final layout.

4. When the table table-layout:fixed layout, the cell setting width is invalid.

Table with the Table-layout:fixed property, the width of the table is fixed by the first row of table, the Width property added later is invalidated, when the colspan merged cells are added, the width of the subsequent cells is evenly distributed.
Workaround: Add the Colgroup property to the first row of the table and fix the width of all columns beforehand.
For example:
<table width= "93%" border= "1" align= "center" cellpadding= "2" cellspacing= "0" style = "table-layout:fixed;" >
<colgroup>
<col width= "></col>"
<col width= "></col>"
<col width= "></col>"
<col width= "></col>"
</colgroup>
<tr>...</tr>
</table>

4. The left blue part is left floating, the right blue background part does not do layout processing, the red part is right floating, removing the floating effect (Clearboth ... ),

Find the height of the outer box is not right, the buttons and comment text boxes just wrapped them, and their parent container inexplicable more than the next section, the height and the left blue marquee consistent

。 Guess the right side of the float is affected by the left, for specific reasons unknown origin.

Solution: When left and right layout, the left side with floating, preferably with position:absolute layout, or float:left these, eliminate the influence of the left floating, establish their own independent context, there will be no impact

CSS Problem Collection