Wie richten Sie 2 divs in einem div-container mit CSS (siehe Bild)

Ich mache eine kleine layout-Breite von exakt 6 divs, und ich habe versucht, verschiedene Zeiten, richten Sie es mit float ausrichten " clear:both und ändern der Höhe/Breite, aber ohne Erfolg. Ich will so etwas wie in diesem Bild: http://i.stack.imgur.com/j1jxX.png

HTML Quelle:

    <div id="description">
    <div class="itemDescription"><!--Item 1-->
        <div class="imageDescription"></div>
        <div class="textDescription">
            <div class="titleDescription">Encontre pessoas</div>
            <div class="detailDescription">Encontre facilmente pessoas com um buscador inteligente</div>
        </div>
    </div>
        <div class="itemDescription"><!--Item 2-->
        <div class="imageDescription"></div>
        <div class="textDescription">
            <div class="titleDescription">Encontre pessoas</div>
    <div class="detailDescription">Encontre facilmente pessoas com um buscador inteligente</div>
    </div>
</div>

CSS-Quelle:

#description {
width: 96%;
background: rgb(244, 244, 0);
}
.itemDescription {
padding: 8px;
border: solid 1px red;
}
.imageDescription {
float: left;
height: 72px;
width: 20%;
background-image: url(http://addons.opera.com/media/extensions/75/86675/1.0-rev2/icons/icon_64x64.png);
background-position: center center;
background-repeat: no-repeat;
border-right: solid 3px black;
}
.textDescription {
float: left;
width: 70%;
border: solid 3px blue;

}
.titleDescription {
border: solid 3px brown;

}
.detailDescription {
border: solid 3px black;
padding: 10px;
}

hier mein JSFiddle: http://jsfiddle.net/5xhQk/

Dank auch allen, die Sie

Die Geige hat das gleiche layout wie das Bild nur ein anderes Aussehen. Was genau ist falsch mit dem, was Sie zeigte in die Geige?
Die gelb-Polsterung ist nicht zu respektieren, die Ihren Platz...
Fertig!! Die Ergebnisse( ich lege Regenbogen-Farben nur zu trennen: jsfiddle.net/5xhQk/3 vielen Dank für alle Hilfe 😀

InformationsquelleAutor Erick Ribeiro | 2013-01-12

  1. 1

    Konnte man auch mit Tisch zu bekommen, was Sie wollen, aber wenn Sie wirklich wollen, zu verwenden, div, müssen Sie die Verwendung von float in jeder div. So etwas wie dieses: http://jsfiddle.net/5xhQk/1/

    #description{
  float: left;
  width: 100%;
}

.itemDescription{
  float: left;
  width: 100%;
  height: 72px;
}

.imageDescription{
  background: blue;
  float: left;
  width: 20%;
  height: 100%;
  border: 1px solid black;
}

.textDescription{
  float: left;
  width: 70%;
  height: 100%;
  border: 1px solid black;
  border-left: 0;
}

.titleDescription{
  float: left;
  width: 100%;
  border-bottom: 1px solid black;
}

.detailDescription{
  float: left;
  width: 100%;
}

    Oh, und ich verstehe nicht, warum in deinem Bild ist es die Breite 20% und 70%, was u tun mit den restlichen 10%?

    Die 10% ist reserviert für die Grenzen :/ ich weiß nicht, wie genau die 100% der Breite. Wenn ich 20% + 80%, das div wird die Pause zur nächsten Zeile
    so ist das, was ich habe, was u wollen, oder nicht?
    etwas wie das hier tun: jsfiddle.net/5xhQk/2 mit margin-right: -1px;
    Danke!!! Es ist! 😀

    InformationsquelleAutor Chanckjh

  2. 0

    Lassen Sie mich sehen, wenn ich es habe, u wollen, richten Sie die imageDescription und textDescription im itemDescription

    Ja. Ich möchte einen linken div ausgerichtet, um eine richtige div. Oh, ist Es möglich, die Breite genau 100% mit den Grenzen?

    InformationsquelleAutor Zlatko Soleniq

  3. 0

    Versuchen, somethign wie:

    HTML:

    <div class="itemDescription">
    <div class="imageDescription ">
        Your image
    </div>
    <div class="cl">&nbsp;</div>
    <div class="textDescription">
        some header
        some paragraph
    </div>
</div>

    CSS:

    .cl{
clear:both;
}
.itemDescription {

    width: something;

}

.imageDescription {

    float: left;
    width: something;
}

.textDescription {
    float: right;
    width: something;
}
    Es funktioniert auch, das mit dem 'clear:both' ich keine Notwendigkeit für die Verwendung von 'float:left' im übergeordneten divs 🙂 vielen Dank,

    InformationsquelleAutor Zlatko Soleniq

Schreibe einen Kommentar