CSS + Div tips (centered, highly adaptive)

How to align a layer horizontally in a browser

<Style type = "text/CSS">

<! --

Div {

Position: absolute;

Left: 50%;

Margin: 0 0 0-100px;

Width: 200px;

Height: 200px;

Border: 1px solid red;

}

-->

</Style>

<Div> Web Standard FAQ </div>

Here we use the absolute percentage position, and the method of negative value of the external patch, the negative value is its own width and height divided by two

Another method I commonly use nowThat is, add a div layer to the outer Div layer. The DIV layer can only have one attribute align = "center", but cannot have other attributes. In this way, the content is displayed in the center.

FFWhy is the height of the parent container not adaptive?

A very common CSS problem is that when floating is used, the lower layer is overwritten by the floating layer, or the nested child layer in the layer is out of the outer range.

The general solution is to add an additional element after the floating layer, such as a div or a Br, and define its style as clear: Both.

1,Method 1 (clear: Both)

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>

<Style type = "text/CSS">

<! --

Div {width: 200px; Border: 1px solid red}

P {float: Left; width: 100px ;}

-->

</Style>

<Div> <p> Web Standard FAQs daquan web standards FAQ Daquan web standards FAQs daquan web standards FAQ Daquan web standards FAQs daquan web standards FAQ Daquan web standards FAQs daquan web standards FAQ Daquan web standards FAQs daquan web standards FAQ Daquan web standards FAQs </P>

/* Add */<Div style = "clear: both"> </div>/* to clear the floating p */

</Div>

2,Article how to clear floats without structural MarkupSolutions

According to the article, the first method may have problems in some cases, but I thought it was in English and I didn't finish it. He only sought his solution.

<Style>

. Floatholder {

Border: 4px solid #000; margin: 10px 0 0; Background: # dc8; font-size: 1.2em ;}

. Floatbox {

Float: Left; width: 20%; Background: #773; Border: 3px solid # f55; color: # FFD ;}

. Clearfix: After {

Content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}

. Clearfix {

Display: inline-block ;}

</Style>

<Div class = "floatholder">

<Div class = "floatbox">

<P> This float is not enclosed by the surrounding Div container. </P>

</Div>

<P> This container lacks the fix. </P>

</Div>

<Div style = "height: 20px; clear: Both;"> </div> <! -This row is only used as a blank row -->

<Div class = "Clearfix floatholder">

<! -- "Clearfix" must be the first attribute -->

<Div class = "floatbox">

<P> see how this float no longer protrudes out of the ining box, with no extra clearing element used in the container!

</P>

</Div>

<P> This float container has a class attribute of "Clearfix", which applies the: After fix, or the holly hack, depending on the browser. </P>

 

</Div>

Clear: BothApplication Extension)

 

This is actually a highly adaptive problem. In TD, this function is so simple that you don't have to consider it. However, when you suddenly switch to Div, this function seems very difficult to implement.

However, from the first method of "solving parent container highly adaptive" above, you can think of setting the background color in the parent container and setting the background color in the DIV that does not need the background color to be white. In this way, is it true?

For example:

The parent container contains two parts: a on the left and B on the right. Now you need to set the background color "blue" on a, B to keep the background color (white), and B's content is changed, that is, A must be the same as B to automatically fill the background color.

Therefore, according to the preceding solution, set "blue" in the parent container, "B" to the right, set white, and "A" to the left without color, in this way, a will be automatically filled.