Bild neben text in einem DIV

Versuchen setzen Sie ein Bild neben einen Absatz, aber es scheint nicht zu funktionieren.

Dies ist, was ich habe:

<div class="dhn-info-div">
    <p>DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span></p>            
   <img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors">
   <div style="clear:both"></div>
</div>

und CSS:

.dhn-info-div {
    margin-top: 20px;
    background-color: #a20e45;
    width: 95%;
    display: inline-block;
}
.dhn-info-div p {
    padding: 20px 40px 20px 40px;
    color: white;
    font-size: 18px;
    line-height: 35px;
    word-spacing: 5px;
}
.dhn-info-div img {
    float: right;
}

Bild, auf der rechten der text. Der div sollte nicht 100% in der Größe. Cheers

Dies ist, wie ich es Aussehen soll:

http://i.stack.imgur.com/bPxbB.png

  • Möchten Sie wickeln den text um das Bild oder eine Spalte text neben das Bild?
  • was ist die Breite und Höhe des Bildes?
  • bitte schauen Sie auf den link, um das fertige Produkt. Breite 450 soll aber ansprechbar sein.
InformationsquelleAutor keitex | 2014-01-30
  1. 1

    Je nachdem, wenn Sie möchten, wickeln Sie den text um das Bild herum oder haben 2 Spalten, hier sind beide Lösungen:

    1. Wenn Sie möchten, wickeln Sie den text um das Bild herum muss es sein, innerhalb der p tag. Siehe Beispiel (Außerdem habe ich ein 10px-padding um das Bild).

    2. Wenn Sie möchten, 2 Spalten, die Sie brauchen, um zu definieren die Breite der beiden, so dass Sie fit in. Außerdem habe ich float: left; auf beide und einige padding auf das Bild, um es sich etwas besser. Siehe Beispiel

    • Folgen Sie Ihrem Beispiel, das ich verlassen mußte, um das Bild zu schweben rechts und fügen Sie die Breite der div. Dann auch festlegen, margin auf 0 für img. Dieser gab mir, was ich nach war. Danke
    InformationsquelleAutor Stuart
  2. 1

    BEISPIEL

    Die Sie benötigt, um einige width um einige Elemente, wie der text
    auch Sie hatte keine width oder height auf dem Bild.

    Habe ich auch noch top:40px; auf Ihr Bild, um es zu bringen bis auf die Ebene des Textes

    InformationsquelleAutor SaturnsEye
  3. 0

    Können Sie den <img> in Ihrem <p> oben? das wäre es fix:

    <div class="dhn-info-div">
    <p>
        <img src="wp-content/themes/expound/images/dhn-directors.png" alt="Devonshire House Network Directors" />
        DEVONSHIRE HOUSE NETWORK IS A <span class="dhn-purple">PEOPLE-FOCUSED</span> MEMBERSHIP CLUB FOR DIRECTOR-LEVEL <span class="dhn-purple">PROFESSIONALS</span> IN LEADERSHIP ROLES WHO HAVE AN INSTINCTIVE FOCUS ON <span class="dhn-purple">THE HUMAN SIDE OF ENTERPRISE..</span>

    </p>

    <div style="clear:both"></div>
</div>
    InformationsquelleAutor RononDex
  4. 0

    Edit: ist jetzt responsive!

    machte ich diese Geige, überprüfen Sie es http://jsfiddle.net/fYh7u/

    können Sie wickeln den text in ein div, und das Bild in einem anderen div, innerhalb der main-div "dnh-info-div", in meinem Beispiel vermisse ich den "div", am Ende von Klasse, da ist offensichtlich.

    HTML:

    <div class="dhn-info">
<div class="dhn-text">
    <p>devonshire house network is a <span class="text-purple">people-focused</span> membership club for director-level <span class="text-purple">professionals</span> in leadership roles who have an <span class="text-purple">instinctive focus</span> on <span class="text-purple">the human side of enterprise.</span></p>
</div>
<div class="dhn-img">
    <img src="http://i.imgur.com/kzJiOjx.jpg" alt="" />
</div>

    CSS:

    .dhn-info {
    width: 100%;
    background-color: #a20e45;
    display: inline-block;
}
.dhn-info .dhn-text {
    width: 50%;
    height: auto;
    float: left;
    padding: 20px 10px 0px 35px;
}
.dhn-info .dhn-text p {
    font-family: arial;
    font-size: 24px;
    color: #fff;
    line-height: 30px;
    text-transform: uppercase;
    word-spacing: 5px;
    margin: 0;
    padding: 0;
    display: block;
}
.dhn-info .dhn-img {
    width: 40%;
    height: 100%;
    float: right;
}

.dhn-info .dhn-text p > span.text-purple {
    color: #9b59b6;
}
.dhn-info .dhn-img img {
  display: block;
  height: auto;
  max-width: 100%;
}
    InformationsquelleAutor Leandro RR
Schreibe einen Kommentar