将一个 div 包裹在另一个 div 上

Question

我目前正在研究 Tumblr 链接帖子的转发链。我想要实现的设计类似于报纸专栏或杂志的设计，看起来像这样：

目前，我已经能够实现这一目标：

.linkpost {
    background: #000;
    width: 100px;
    height: 400px;
    font-family: 'Tahoma', sans-serif;
    font-weight: 700;
    text-align: center;
    margin: 0 10px;
    display: block;
    float: left;
    overflow: hidden;
}

.link {
    width: 40px;
    height: 290px;
    color: #ccc!important;
    font-size: 32px;
    text-overflow: ellipsis;
    writing-mode: vertical-rl;
    margin: 30px 30px 0 30px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

.link:hover {color: #ccc!important;}

.linkhost {
    width: 90px;
    background: #ccc;
    font-size: 10px;
    text-transform: uppercase;
    line-height: 18px;
    margin-left: -5px;
    padding: 10px;
    -webkit-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    -moz-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    transform: rotate(8deg);
}

.linkrb {
    background: aqua;
    text-transform: uppercase;
    margin-left: 10px;
}

/**BODY OF TEXT <p>**/
.linktion {
    background: blue;
    margin: 10px 10px 20px 0px;
    padding-left: 10px;
}

/** IMG **/
.linktion .npf_inst {
    position: relative;
    float: right;
    clear: both;
}

<!--TUMBLR MARKUP-->
    {block:Link}
        <div class="linkpost">
            <a href="{URL}" class="link" {Target}>{Name}</a>
            {block:Host}
                <div class="linkhost">{Host}</div>
            {/block:Host}
        </div>
    <!--REBLOG-->
        {block:RebloggedFrom}
            {block:Reblogs}
                {block:HasPermalink}<a class="linkrb" href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}{block:IsDeactivated} <p class="deact">(Deactivated)</p>{/block:IsDeactivated}
                <div class="linktion">{Body}</div>
            {/block:Reblogs}
        {/block:RebloggedFrom}
    {/block:Link}

    .linkpost {
        background: #000;
        width: 100px;
        height: 400px;
        font-family: 'Tahoma', sans-serif;
        font-weight: 700;
        text-align: center;
        margin: 0 10px;
        display: block;
        float: left;
        overflow: hidden;
    }

    .link {
        width: 40px;
        height: 290px;
        color: #ccc!important;
        font-size: 32px;
        text-overflow: ellipsis;
        writing-mode: vertical-rl;
        margin: 30px 30px 0 30px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
    }

    .link:hover {color: #ccc!important;}

    .linkhost {
        width: 90px;
        background: #ccc;
        font-size: 10px;
        text-transform: uppercase;
        line-height: 18px;
        margin-left: -5px;
        padding: 10px;
        -webkit-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -o-transform: rotate(8deg);
        transform: rotate(8deg);
    }

    .linkrb {
        background: aqua;
        text-transform: uppercase;
        margin-left: 10px;
    }

    /**BODY OF TEXT <p>**/
    .linktion {
        background: blue;
        margin: 10px 10px 20px 0px;
        padding-left: 10px;
    }

    /** IMG **/
    .linktion .npf_inst {
        position: relative;
        float: right;
        clear: both;
    }

    /**FOR SNIPPET PURPOSES**/
    .example {
        width: 400px;
    }

    <!--WORKING MARKUP-->
        <div class="example">
            <div class="linkpost">
                <a href="#" class="link">WEBSITE NAME</a>
                <div class="linkhost">WEBSITE HOST</div>
            </div>
        <!--REBLOG-->
            <a class="linkrb" href="#">USERNAME 01</a>
            <div class="linktion">BODY EXAMPLE 01.
                <br />
                <img class="npf_inst" src="https://64.media.tumblr.com/3b7a95efbb7277c1e18ee4229b6b4e0b/tumblr_inline_p9b477ezIm1r64lal_1280.jpg" />
                <br />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nisl ligula, condimentum ornare nisi eget, hendrerit vulputate augue. Integer eu eros ac metus condimentum faucibus ut commodo enim.</div>
            <a class="linkrb" href="#">USERNAME 02</a>
            <div class="linktion">BODY EXAMPLE 02.
                <br />
                Maecenas nibh risus, imperdiet feugiat sapien sit amet, volutpat tempus lorem. In hac habitasse platea dictumst. Mauris nec luctus nibh, ut eleifend dui.
                <img class="npf_inst" src="https://64.media.tumblr.com/6b6cb803c27fd1bda26b88d5cde4f0bb/3ddd65585e21cf88-6d/s1280x1920/a7f85ab5c240143bd12e039955cb142372f4b7ee.jpg" />
                <img class="npf_inst" src="https://64.media.tumblr.com/cc711885e529805409f47e7c89cbd1bf/3ddd65585e21cf88-95/s1280x1920/2516ffbf13763911f3911534728687f2c7fa26be.jpg" />
                <br />
                Praesent dictum congue ex et varius. Suspendisse potenti. Sed vel metus mi.
            </div>
        </div>

问题是，图像应该直接位于

craftymutt.blogspot.com.au

链接 div 的右侧，并且位于链接

ASYNCA

的正下方。我可以通过将图像的宽度设置为

233px

来实现这一点；但是，这也会使以下图像具有相同的宽度，而不是自动填充页面的其余部分，这会破坏布局并溢出到下一篇文章中。

最终目标是：

所以，我的问题是，有没有办法将一个充满内容（图像、文本和链接等）的 div 包裹在另一个 div 周围？或者，是否可以将图像包裹在另一个 div 周围而不设置固定宽度？