Как обернуть контент - включая изображения - вокруг отзывчивой CSS боковой панели

Question

Вот макет, который я пытаюсь достичь:

В настоящее время мой контент представляет собой серию основ c, блок HTML элементы (h[1-5], p, ul, et c.), содержащиеся в div, и, если возможно, я бы хотел сохранить их в таком виде. Все изображения находятся внутри своих p, чтобы быстро изменить размер

Я смог добавить div style="float:right" к верху содержимого, которое создает боковую панель и оборачивает «обычный» текстовый контент вокруг него - в частности, первый абзац в моей схеме выше. Тем не менее, img, для которого установлено значение 100%, не переносится, он течет ниже боковой панели.

Так что на самом деле я хочу, чтобы изображения имели одну из двух ширин - либо ширину 100% (боковая панель), если верхняя часть изображения «должна быть» выше нижней части боковой панели, или 100%, если верхняя часть изображения находится ниже нижней части боковой панели.

Конечно, я могу вручную установить ширину изображения, когда отладка страницы до значения шириной менее 100% (боковая панель), и она сразу же встает на свое место, поэтому браузер точно знает, что это за размер, чтобы не «pu sh» изображение внизу боковой панели ...

Вот фактическая страница, где я хотел бы, чтобы это заработало; обратите внимание, что первое изображение находится под боковой панелью:

https://adventuretaco.com/?p=3655&draftsforfriends=kIq7mVDhNtCSklITGCJs2HAcE9xuPX8d

Кроме того, здесь указаны CSS и HTML, которые у меня есть в настоящее время для поста. содержание:

CSS

p {
    margin: 0 0 1.25em 0;
}

ol, ul {
    margin: 0 1.5em 1.25em 1.5em;
}

.full-width-container {
    width: 100%;
}

.full-width-container img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    transition: 0.5s;
}

.full-width-container img.flickrPhoto {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    transition: 0.5s;
}

HTML

<div class="post-content">
<p>As you may recall, we'd just cancelled our flight home due to the unknowns of Covid-19, but were still in exploration mode as we entered the Valley of Fire State Park in southeastern Nevada.</p>
<p id="photoContainer132" class="full-width-container"><img id="photo132" class="flickrPhoto" src="https://live.staticflickr.com/65535/49714173358_d19b1c2e70_n.jpg" /></p>
<p>Our trip to the Valley of Fire was somewhat opportunistic to say the least. A year before this trip ever even crossed my mind, I'd seen a photo on Flickr that had caught my eye. Sharp as ever, I completely forgot to save the photo or a link to the photo <img src="https://www.tacomaworld.com/styles/default/my/smilies/annoyed_gaah.gif" />, but - luckily for me - the photo had been geotagged <em>and</em> I'd saved a point of interest in my Google Earth map of Nevada. I'd noticed that point as I'd planned this trip, and mapped out the route, excited to see what nature had in store. So yeah, apparently, I'm not <em>always</em> as dumb as I look. <img src="https://www.tacomaworld.com/styles/default/my/smilies/original/wink.png" /> In researching Valley of Fire, I also discovered a second hike -rumored to have petroglyphs - and since it was on our way to the main attraction, we decided to stop off there first.</p>
<p id="photoContainer133" class="full-width-container"><img id="photo133" class="flickrPhoto" src="https://live.staticflickr.com/65535/49715029457_a61cffc61b_n.jpg" /></p>
</div>

Answer 1

ОК, так что после большого количества исследований, проб и ошибок я пришел к выводу, что ответ на этот вопрос заключается в том, что он не может быть решен только с помощью CSS / layout.

In конец, включенный Javascript для решения проблемы. Это не идеально - если изображения были уменьшены, чтобы обтекать боковую панель, то когда окно браузера становится больше, они не становятся больше в идеале, как могли бы.

Вот где я в конечном итоге; рабочий образец в (прокрутите вниз, чтобы увидеть боковую панель) https://adventuretaco.com/hidden-valleys-secret-tinaja-mojave-east-5/#photoContainer190

// start shortly after page is rendered
setTimeout(resizeImagesForFacebookEmbed, 500);

function resizeImagesForFacebookEmbed() {
    var tryAgain = true;

    // find each of the elements that make up the post, and iterate through each of them
    var content = jQuery('div.post-content').children().each(function () {
        if (this.tagName.toLowerCase() == 'p') {
            var firstChild = this.firstChild;
            var firstElementChild = this.firstElementChild;

            if (firstChild != null && firstChild == this.firstElementChild && firstElementChild.tagName.toLowerCase() == 'img') {
                var pRect = this.getBoundingClientRect();
                var imgRect = firstChild.getBoundingClientRect();

                var difference = imgRect.top - pRect.top;

                // if the image contained in the p is not at the top of the p, then make it smaller
                // so it will fit next to the embed, which is 350px wide
                if (difference > 25 || imgRect.width < (pRect.width - 400)) {

                    var sidebarLeft = document.getElementById("fbSidebar").getBoundingClientRect().left;
                    var imgLeft = firstChild.getBoundingClientRect().left;
                    var imgWidth = (sidebarLeft - imgLeft) * .95;

                    firstChild.style.width = imgWidth + "px";
                    tryAgain = false;
                    setTimeout(resizeImagesForFacebookEmbed, 1000);

                } else {
                    // do nothing
                }
            }
        }
    });

    if (tryAgain)
        setTimeout(resizeImagesForFacebookEmbed, 1000);
}

var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
            clearTimeout(timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
    };
})();

// handle window resize event to re-layout images
jQuery(function () {
    jQuery(window).resize(function () {
        waitForFinalEvent(function () {
            resizeImagesForFacebookEmbed();
        }, 500, "atFbEmbedId"); // replace with a uniqueId for each use
    });
});

Answer 2

Я думаю, что сначала вам нужно немного уменьшить ваши изображения, из-за их размера становится немного трудно манипулировать ими в рамках того, что вы хотели бы сделать. Вы можете изменить их внутри тега или из файла css. Затем, после этого, вы можете использовать внутри этого кода "float: left;" в img .full-width-container задайте поле, которое должно располагать их из стороны в сторону.