0

我有两个 inline-block 元素，即dt和<div class="details">。

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

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

我的问题是，可以dt先调整图像大小（当浏览器调整大小时 - 没有到达浏览器边缘）？所以我的第二个 inline-block 元素<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/

4

1 回答 1

0

这是一个小提琴

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

此解决方案使用calc()(CSS3)，因此如果您需要旧版浏览器支持，请改用脚本。此外，如果您可以使用常规布局（divs 而不是列表布局），则可以使用 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;
}
于 2013-10-13T07:47:01.050 回答