html5 Abschnitt mit zwei horizontalen divs

Brauche ich eine <section></section> besteht aus der linken und rechten Teile. Der linke Teil ist nur ein einziges string—Datum. Der Rechte Teil sollte etwas beinhalten wie: 

<span>title</span>
<p>a lot of text of variable lenght</p>

Sollte ich <div>s in einem Abschnitt? Der text aus dem rechten Teil sollte der Aufenthalt auf dem rechten Teil nur (so kann ich nicht verwenden float:left; allein auf der linken Seite).

Hier ist meine Lösung ohne <section>s, aber es funktioniert nicht für 100%, der text geht an der linken Seite nach der Höhe von 10px (siehe code unten).

    <div style="overflow: hidden; border: 1px solid red; padding:5px; ">
        <div style="float: left; width: 100px; height: 10px; color:blue;">right</div>
        <div style="">
            <span style="color:blue;">Lorem ipsum</span>
            <p>a lot of text of variable lenght</p>
        </div>
    </div>

Wie kann ich den code optimieren und machen es mit HTML5 keine Fehler gefunden, wenn einige?

InformationsquelleAutor Haradzieniec | 2012-07-06
  1. 2

    Verwenden Sie einfach margin-left:100px; auf den rechten Teil, und loszuwerden, die Höhe auf der linken Seite (Beispiel):

    <section style="display:block; overflow: hidden; border: 1px solid red; padding:5px; ">
    <aside style="display:block; float: left; width: 100px; color:blue;">right</aside>
    <div style="margin-left:100px;">
        <span style="color:blue;">Lorem ipsum</span>
        <p>a lot of text of variable lenght</p>
    </div>
</section>
    InformationsquelleAutor 0b10011
  2. 0

    Wenn Sie float: left' eine div sollten Sie float: right; den anderen für diese zu zeigen, richtig in einigen Versionen von Internet Explorer und wahrscheinlich auch andere Browser auch.

    • Legen Sie Sie einfach in style=" ". Hat auch nicht geholfen.
    InformationsquelleAutor Chris Snowden
  3. -1

    Den modernen Stil wäre die Verwendung der CSS3-box-Modell (Beispiel):

    <style type="text/css">
#horbox {
    display: -webkit-box;
    display: -khtml-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    -webkit-box-orient: horizontal;
    -khtml-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    -o-box-orient: horizontal;
    box-orient: horizontal;
}
</style>
<div id="horbox" style="border: 1px solid red; padding:5px;">
    <div style="width: 100px; color:blue;">right</div>
    <div>
        <span style="color:blue;">Lorem ipsum</span>
        <p>a lot of text of variable lenght</p>
    </div>
</div>

    Aber der CSS3-box-Modell ist tatsächlich noch nicht von allen Browsern unterstützt. Mit Firefox 13, z.B. die Anzeige ist wie gewünscht.

    • Erstens, es ist bekannt als das Flexible Box Layout-Modul Flexbox. Auch die syntax ist veraltet (Alter, neue), und display:box; (spec) ersetzt wurde mit display:flex; (spec) und box-orient (spec) wurde durch mehrere neue Eigenschaften (spec).
    InformationsquelleAutor Michael Besteck
Schreibe einen Kommentar