Finden Sie die Breite des untergeordneten Bildes und wenden Sie es auf das enthaltende übergeordnete div jquery an

ich habe ein <img> und einige <p>ist in a <div>.

Ich möchte die Breite des untergeordneten img abrufen und auf die Breite des übergeordneten div anwenden, damit die Textabsätze auf die gleiche Breite wie das img umbrechen.

Ich möchte dies für mehrere Iterationen auf derselben Seite tun können.

Hintergrund:
Ich entwickle ein WordPress-Theme, das das Maurer-jquery-Plugin verwendet (http://desandro.com/resources/jquery-masonry). Mein Theme hat etwas mit dem Gridalicious-Theme gemeinsam (http://suprb.com/apps/gridalicious), aber die Postbreiten und -größen werden durch die Bildbreite bestimmt und sind nicht einheitlich.

Mein HTML/CSS ist makellos, aber mein Jquery/Javascript ist ziemlich wackelig – aber wenn ich ein paar Hinweise bekommen kann, sollte ich damit arbeiten können.

Jede Hilfe wird wirklich geschätzt.

Das funktioniert perfekt. Beachten Sie, dass Sie $(window).load() anstelle von $(document).ready() verwenden müssen, da $(document).ready() ausgelöst wird, bevor die Bilder tatsächlich geladen werden, und die Bilder daher keine Breite haben.

$(window).load(function() {
    $('div').each(function() {
        $(this).width($(this).find('img').width());
    });
});

Bearbeiten: Beachten Sie, dass dies die Breite von der Basis ausmacht Erste Bild in der div. Ändern Sie einfach den Index ([0]), um es auf einem anderen Bild im div zu basieren.

Bearbeiten 2: Wendete Johns Korrektur auf die Funktion .width() an.

Dadurch werden alle divs auf der Seite gefunden und ihre Breite gleich der Breite ihres untergeordneten img-Elements gesetzt.

 $('.divselector').attr('width', $(this).find('img').attr('width'))

Sie müssen dafür überhaupt kein Javascript verwenden. Wenn Sie das Bild und das p in untergeordnete Divs einfügen, kann dies wie in Chris ‘Lösung rein in CSS erfolgen (hier ist das JSFiddle: http://jsfiddle.net/glee/qs8GJ/ auf die folgende SO-Frage: css – verkleinern Sie ein übergeordnetes div, um es an die Breite eines untergeordneten Elements anzupassen, und beschränken Sie die Breite des anderen untergeordneten Elements

Der Trick besteht darin, das übergeordnete Div auf …

display: table-cell;

das Bild div zu …

display: table-row;
width: 1px;

…und das div mit dem Absatztext bis

display: table-cell;
width: 1px;

Funktioniert wie Charme!