CSS DIv-Container Höhe. Floating DIV Fragen

Können Sie erzwingen, dass ein DIV-container die Höhe, um Platz für zwei gefloateten div-Kinder? Gibt es einen tollen trick, den ich verwenden kann, das zu tun? Ich versuche, zwei gleich große divs innerhalb des Eltern-div. Ich möchte, dass Sie nebeneinander erscheinen mit ein wenig Leerraum zwischen Ihnen. Kind2 tendenziell pop aus und gehen Sie unten Child1. Hinweis kind2 eine Tabelle enthält. Sollte ich treiben?

HTML:

<div id="parent">
  <div id="child1"></div>
  <div id="child2">
    <table><tr><td>content</td></tr></table>
</div>
</div>

CSS:

div#parent
{
    background-color: #C6E4E0;
    border: solid 3px #017E6F;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    width:99%;
}

div#parent div
{
    width:49%;
    float:right;  
    padding:3px;  
}

div#parent div:first-child
{
    float:left;
}
InformationsquelleAutor Hcabnettek | 2009-08-18
  1. 7

    Dies ist nicht ein clearfix Problem Jungs, sein problem ist, dass seine beiden gefloateten divs nicht angezeigt werden Seite an Seite.

    Zuerst von all, Sie brauchen nicht, um die Breite des übergeordneten div, divs sind block-Elemente, d.h. Sie passen sich automatisch in Ihrer Breite zu nehmen, bis die volle Breite der Eltern (in diesem Fall vermutlich das übergeordnete div#parent ist der Körper).

    Weil Sie die Breite explizit UND gibt es Polsterung, kann es möglicherweise erstrecken sich ÜBER den Körper. Das spielt eigentlich keine Rolle, aber wenn Sie das gleiche wissen, um das Kind gefloateten divs und Sie können sehen, warum die rechten könnte man stieß Sie nach unten.

    Erst, wenn du explizit einstellen der breiten der divs zu einem Prozentsatz, die Sie nicht brauchen, um hinzuzufügen, Polsterung. Weil es sich mit prozentualen breiten, es ist besser, hinzufügen Polsterung an den Inhalt des divs anstatt die divs selbst, denn die Polsterung ist HINZUGEFÜGT, um die Breite. Deshalb, wenn Sie Hinzugefügt 10px padding auf ein div, das eine 49% Breite in einem 100px Eltern, es hätte eine Breite von 49px + 10px + 10px (2 Seiten) für insgesamt berechnete Breite von 69px.

    Da Sie nicht post von markup und Inhalt oder welchen browser du testen, kann ich nicht genau sagen, warum das div wird, stieß nach unten. Es gibt zwei wahrscheinliche Möglichkeiten.

    1. Sie mit IE, die es erlaubt die Tabellen erstrecken sich über seinen parent-div, die Bruch verursachen. Versuchen Sie explizit festlegen die Breite der Tabelle um einen Prozentsatz der Eltern oder sowas.
    2. Die 49% - width + padding = größer als [parent-Breite] - [left-div-Breite]. Dadurch wird es zu bekommen, stieß sich ab, weil der linke div-Element und Rechte div sind zu breit für die Eltern der Breite.
    InformationsquelleAutor kmiyashiro
  2. 3

    Ich die clearfix Klasse.

    .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/

.clearfix {
    display: block;
}

/* End hide from IE-mac */

    dann verwenden Sie einfach die Klasse und in jedem Schwamm-element container.

    InformationsquelleAutor
  3. 1
    #container { width:200px; }
.floated   { width:100px; float:left; }
.clear     { clear:both; }

<div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
  <div class="clear"></div>
</div>
    • dies ist nicht eine klare/layout Problem, sein problem ist, dass die Schwimmer nicht erscheinen nebeneinander.
    InformationsquelleAutor Sampson
  4. 1

    Ich bin kein fan von clear: both; ich eher dazu in Jonathan Sampsons Beispiel:

    #container { width:200px; overflow: hidden; }
.floated   { width:100px; float:left; }

     

    <div id="container">
  <div class="floated">A</div>
  <div class="floated">B</div>
</div>
    • Dies ist nicht eine clearing - /layout-Problem, es ist ein float-Problem.
    • Eigentlich ist dies für mich gearbeitet. Vermeidung von zusätzlichen "clear:both" div, der Elternteil das Recht habe, Höhe inklusive Polsterung.
    InformationsquelleAutor janhartmann
  5. 1

    Durch die Art und Weise, die Sie wollen

    div#parent > div { float:left; }

    statt

    div#parent div:first-child { float:left; }

    ist noch nicht IE6 freundlich, aber es schwimmt beiden untergeordneten DIVs.

    • Eigentlich nicht, er schwimmen will das erste div an den rechten und das zweite div-Element auf der linken Seite, so dass erste Kind die richtige ist.
    • natürlich funktioniert es nicht im IE...
    • Ah ja, ich sehe, dass jetzt, danke.
    InformationsquelleAutor Eric Wendelin
Schreibe einen Kommentar