0

Sometimes even the most simplest of things can seem impossible... have a look at this if maybe you see what I dont.

>> LINK

A div (in green) that is divided using classes into to two sides L and R.

For some reason the classes "left-content, right-content" do not want to stay inside the "examples" div.

#examples 
{
width:100%;
margin-bottom:45%;
padding-top:10%;
height:auto;
border-top: dashed #CCC 1px;
background-color:#0FC
}




.resize 
{
width:100%; 
height:auto; 
border: solid #CCC 1px;
}

.left-content
{
float:left;
width:60%;
}

.right-content
{
float:right;
width:30%;
padding-left:5%;
}

.title
{
margin-top:0px;
font-family: 'PT Sans Narrow', Arial, sans-serif; font-size: 1.00em; font-weight:300;     letter-spacing: 0.1em; color:#F63
}   

.content
{
font-family: 'PT Sans Narrow', Arial, sans-serif;font-size: 0.80em; font-weight:300; color:#444; text-justify:newspaper
}

.goto, .goto a, .goto a:hover, .goto a:visited
{
margin-top:-5px; font-family: 'PT Sans Narrow', Arial, sans-serif;font-size: 0.95em; font-weight:300; color:#09F; text-decoration:none; letter-spacing: 0.1em;
}
4

6 回答 6

5

If you float elements, the parent element can have a hard time finding out how big they are.

We usually fix this using a so called "clearfix". It's an extra element you append to your DOM after your floated elements. These will allow your parent element to find the size of the inner content.

HTML

<div class="left"></div>
<div class="right"></div>

<div class="clear"></div>

CSS

div.clear { clear: both; }

There are other ways to solve this by setting the clear: both property on your parent, or setting a height. But I usually use this and it works very well for me ;)

于 2013-01-17T14:26:42.307 回答
1

That's because the children are floating. Add a div with css clear:both beneath the floating children or add overflow: hidden; on the parent box.

于 2013-01-17T14:26:49.423 回答
1

add

 overflow: hidden;

to #examples

于 2013-01-17T14:28:03.677 回答
0

You need a clear: both; rule on your container div.

Also consider a clearfix like this one: http://www.webtoolkit.info/css-clearfix.html

于 2013-01-17T14:26:56.213 回答
0 
#examples 
{
    display:table;
}
于 2013-01-17T14:29:59.470 回答
0

Floated elements are removed from the regular flow. Therefore, the parent container can't calculate the height of the content. To fix this, we need to clear the floats, which essentially means it will be put back into the flow.

Nicholas Gallagher has made a neat little clearfix trick. Basically, you simply add the class to the parent element, and all containing floats will be cleared.

http://nicolasgallagher.com/micro-clearfix-hack/

 /**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
于 2013-01-17T14:32:33.207 回答