CSS - Positionierung der Bilder neben text

Ich mache eine Website, in der die Bilder müssen im folgenden vorgestellt, um textliche Inhalte - eine Art pseudo-zwei-Spalten-layout, wie die Bilder und text kommen aus einer einzigen html-Quelltext.

Ich gefunden habe eine Recht einfache Möglichkeit, dies zu tun, indem Sie die Bilder als Ihre eigenen Absätze und floating. Würde es noch eine einfachere Art und Weise (in Bezug auf html), um dies zu tun, ohne diese extra Absätze und nur durch das zuschreiben extra css für Bilder?

Wenn die schwebte Bild wird im gleichen Absatz als der text, dann die Absätze mit und ohne Bilder wäre anders in der Breite.

BEARBEITEN: im Grunde bin ich auf der Suche für einfache HTML-markup wie möglich zu positionieren, Bilder wie diese. Die CSS kann Komplex sein 😉

CSS:
p { width: 500px; }
p.image { float: right; width: 900px; }


Current HTML:
<p class="image"><img src="image.jpg" /></p>
<p>Some text here.</p>


Is the above possible with this HTML?
<p><img src="image.jpg" /></p>

InformationsquelleAutor | 2009-06-30

  1. 10

    Sind Sie auf der Suche nach diesem?

    p img { float: right; width: 900px; }

    Diese würde mit allen img-tags innerhalb von p-tags.
    Aber ich empfehle immer die Verwendung von Klassen oder ids übereinstimmen CSS-Regeln. Nur mit der tag-name kann führen, um lästige Stolpersteine, früher oder später.

    Bearbeiten

    Mhm, vielleicht habe ich Sie falsch. Sie möchte float: right; width: 900px; auf die p-Elemente, nicht die img-Elemente ...

    AFAIK gibt es keine Möglichkeit, wählen Sie ein Elternteil ein bestimmtes Elements. Es arbeitet immer in Richtung ELTERN -> KIND, nicht KIND -> PARENT.

    Bis abgewählt, so ist dies sicherlich die einfachste -und wahrscheinlich die schlanksten - Weg. Ich würde vorschlagen, vielleicht das hinzufügen von 'clear: left' aber das ist wahrscheinlich nicht nötig.
    Hi, nicht genau. Da der Inhalt der Website wird aktualisiert, mit einem wysiwyg-editor wie TinyMCE von Personen ohne jegliche Kenntnisse in html/css, ich bin auf der Suche nach einem Weg, das zu erreichen die image-Positionierung mit möglichst wenig zusätzliche markup, wie möglich. Also Klassen für Bilder wäre ok, ich Frage mich nur, ob es gibt einen Weg, um die oben-ohne zusätzliche Absätze. Eine andere Art, es auszudrücken: ich bin auf der Suche nach den einfachen html-markup zu erreichen, diese Art von Bild-Positionierung: widerscreen.fi/2006/3/elokuvallinen_kauhukokemus.htm
    Was ist mit * p?

    InformationsquelleAutor Philippe Gerber

  2. 2

    Nicht. Mit dem img im p, Sie können schwimmen die Bild Recht, aber der text wird nicht bleiben, in einer Spalte. Es wird wrap unter dem Bild. Alle rechten Rand oder Polsterung, die Sie anwenden, zu dem p gilt auch für img.

    Da haben Sie zwei Stücke von Informationen, ich würde wickeln Sie diese in ein div und dann positionieren Sie Sie innerhalb der div.

    .info {width:900px;}
.info img {float:right;}
.info p {margin-right:400px;}

<div class="info">
    <img src="image.jpg" />
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

    InformationsquelleAutor Emily

  3. 1

    In Reaktion auf Emily's Antwort.

    Nicht. Mit dem img im p können Sie
    float-das Bild rechts, aber der text
    bleiben Sie nicht in einer Spalte. Es wird
    wickeln Sie unter dem Bild. Alle Rechte
    margin oder padding, die Sie anwenden, um die p
    auch für den img.

    Während Recht hat Sie, so weit Sie geht, gibt es einen workaround. Obwohl es nicht ideal:

    p {position: relative; padding-right: 950px; /* width of the image + 50px margin */ }

img {position: absolute; top: 0; right: 0; }

    Dies sollte das Bild in der oberen rechten Ecke des p, während zwingen Sie den text in einer Spalte zwischen der linken Grenze des p element und die 950px rechts-Polsterung. Nicht ideal, und ein wenig chaotisch, aber es ermöglicht für den säulenartigen Effekt ohne zusätzliche tags.

    ..., es sei denn, die Sie hinzufügen möchten ein clearfix br(br.clearfix: display: block; clear: both) am Ende des Absatzes (zu zwingen, die p tag zu verlängern Vergangenheit das Bild für kurze Absätze).

    Positionieren Sie das Bild auf der rechten Seite funktioniert, solange die Bilder =< in der Breite der Rinne, die Sie definieren, mit Polsterung auf der p. Sie können faux Spalten (alistapart.com/articles/fauxcolumns) für den hintergrund-Effekt.
    Ja; ich hätte nie gedacht, um zu verdeutlichen, dass -ich nahm den 900px aus dem Beispiel ohne Gedanken - obwohl ich irgendwie impliziert es...vielleicht...irgendwie...in der css-code-Kommentar. >Husten< =)

    InformationsquelleAutor David Thomas

  4. 1

    ja, gerade getestet
    stellen Sie sicher, dass Sie die strengen doctype

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 

<style>
p { width: 500px; position:relative;}
p img { position:absolute; margin-left:520px;}
</style>

<p><img src="PastedImage.jpg" />text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>

    InformationsquelleAutor Raine

  5. -1

    Heckte ich diese Zeile code hier, um mir zu helfen position text genau, wo ich es wollte. Ich könnte ein Anfänger so, aber es bekam den job zu erledigen einfach und leicht und präzise. und alle HTML.

    <a href="http://elonmusk.com" STYLE="position:absolute; TOP: 24px; LEFT:50px;">put your txt in here and use the Top and Left values to position the text precisely where you want it</a>

    können Sie auch das href-Feld, um Ihren text ein hyperlink ist oder ob das jetzt, was Sie wollen, können Sie die jus löschen Sie das href-Feld aber bewusst sein, dass der 

    <a STYLE="position:absolute; TOP: 24px; LEFT:50px;">txt go here - use Top & Left values to position it. ex. of text with no hyperlink</a>
    "Alle HTML -" nicht gut.
    einen Grund, warum?
    Die style Attribut überschreibt jeden anderen Stil (außer diejenigen, die mit !important, und die sind nicht gut), die Niederlagen der Punkt Cascading Style-Sheets und macht die Menschen verwenden !important, und das ist nicht gut für mehr oder weniger aus dem gleichen Grund. Es auch sieht einfach chaotisch und bricht die schöne Trennung zwischen Präsentation und Inhalt der Plattform.

    InformationsquelleAutor Nikoan Johnson

Schreibe einen Kommentar