Jquery 保持内联块直到浏览器宽度达到一定宽度？

我有两个内联块元素，分别是

dt

和

从大屏幕观看时，它们并排出现

当浏览器调整大小时，

将下降到下一行，因为它是一个内联元素，对吗

我的问题是，图像

dt

是否可以首先调整大小（当浏览器调整大小时-未到达浏览器边缘）？所以我的第二个内联块元素

还不会掉下来

当图像达到一定的宽度（比如200px）时，（或者，一定的浏览器宽度），然后

下降到下一行

我想实现这一点，因为在默认情况下，当触摸

dt

时，

将下降到下一行，然后在

dt

和浏览器边缘之间留下这个间隙

希望有人能告诉我如何使用JQuery。多谢各位

HTML

<dl>
    <dt><img src="Image Source"/></dt>
    <div class="details">
        <dd>Name</dd>
        <dd>Price</dd>
    </div>
</dl>

名称
价格

小提琴

这里有一个

dd

必须直接嵌套在

dl

元素中。（删除

div

），即使它工作，也不正确

你的垂直对齐不起作用。（所以我没有在小提琴上演奏）

此解决方案使用

calc（）

（CSS3），因此如果您需要更旧的浏览器支持，请使用脚本。 此外，如果可以使用常规布局（

div

s而不是列表布局），则可以使用CSS表格布局

HTML:

<dl>
    <dt><img src="http://i230.photobucket.com/albums/ee189/pandaktuai/img-fluid.jpg" /></dt>
    <dd>Name<br />Price</dd>
</dl>

*
{
    padding: 0;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body
{
    margin: 0 auto;
    max-width: 1024px;
}

dl
{
    width: 100%;
    background-color: black;
}
    dl:after
    {
        content: '';
        display: block;
        clear: both;
    }

dt, dd
{
    float: left;
}

dt
{
    max-width: calc(100% - 215px);
}

    dt img
    {
        max-width: 100%;
        width: auto;
        height: auto;
        vertical-align: middle;
    }

dd
{
    padding: 5%;
    color: white;
    min-width: 215px;
}

---

avrahamcool，非常感谢，我会先试试你的建议，看看效果如何，如果不行，我想我需要发布一些图片来更好地解释它。