Display:inline-block replacing the float problem

Source: Internet
Author: User

After reading the blog of the Great God, http://www.zhangxinxu.com/wordpress/?p=1194 a new understanding of float, trying to replace the content with float with Display:inline-block. The process is as follows:

First, we create several div:

<Divclass= "Container">    <Divclass= "Content">        <Divclass= "logo"></Div>        <Divclass= "Search"></Div>    </Div></Div>    

Then, set the basic style: where the content block sets the property display:inline-block;

. Container{Height:100px;width:100%;Background-color:#f90; }. Content{Margin-left:Auto;Margin-right:Auto;width:80%;Background-color:#a6c0f9; }. Logo{Height:100px;width:80px;Display:Inline-block;Background-color:Pink; }. Search{Height:100px;width:550px;Background-color:Green;Display:Inline-block;vertical-align:Top; }

The performance is like this:

We found that there was a gap between the logo and the search two Div, which we expected because the spaces in the HTML code were also shown. But what is the height of a little bit more (about 1px)?

Try to remove all the blanks: the gap in the middle is not there, but the height is beyond the scope of the container still exists.

Add content to the middle of the two Div, shown as:

Found below the more 1px disappeared!

Remove the content and use font-size:0 to solve the gap problem:

The extra place was cleared.

But the height of the more out of the place still don't know what reason. To remove the display is not the problem, seems to be on the Inline-block, but the display:inline-block of other information, and did not find the answer, other browsers also have this problem. Think of the solution, want to know the person can point twos, and later find the answer must come to update.

We continue to add an input to search:

<Divclass= "Container">    <Divclass= "Content">        <Divclass= "logo"></Div>        <Divclass= "Search">          <inputtype= "text"class= "Search_input" />        </Div>    </Div>  </Div>    

The findings turn out to be this:

Add border to input after a sudden epiphany, originally because of alignment. Add Vertical-align:top to search, and then everything is normal.

PS: Before learning CSS, as long as you know what to use, out of the problem is also patchwork reluctantly solve the end, this is very bad. Recently found to see more professional books to check documents, master the standard of the people can master the world Ah ~ ~

Display:inline-block replacing the float problem

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.