Question

我有两个内嵌块元素dt和<div class="details">。

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

当浏览器调整大小时，<div class="details">将下降到下一行，因为它是一个内联元素，右边。

我的问题是，图像dt可以先调整大小（浏览器调整大小时 - 不会到达浏览器边缘）吗？所以我的第二个内联块元素<div class="details">还没有下降。

当图像达到一定宽度（比方说200px），（或某个浏览器宽度）时，<div class="details">会下降到下一行。

我想实现这一点，因为默认<div class="details">会在触摸dt时放到下一行，然后在dt和浏览器边缘之间留下这个空白。

希望有人能指出我如何使用一些JQuery来做到这一点。谢谢。

HTML

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

小提琴

http://jsfiddle.net/pandaktuai/SxbHd/

Answer 1

这是Fiddle

dd必须直接嵌套在dl元素中。（删除div），即使它有效也不正确。
您的垂直对齐不起作用。（所以我没有在我的小提琴中实现它）

此解决方案使用calc()（CSS3），因此如果您需要较旧的浏览器支持，请改用脚本。另外，如果你可以使用常规布局（div而不是列表布局），可以使用CSS表格布局来完成。

<强> HTML：

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

<强> CSS：

*
{
    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;
}

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

1 个答案: