0

好吧，我现在有点大了。

我正在处理基本线框（已附加），但在实现此布局时遇到了麻烦。基本上，我们有一个容器 div，里面还有几个 div。每个内部 div 都是产品的组件，并且都具有完全相同的结构化内容流 - 图像、产品标题和文档链接。在线框中显示了 7 个组件 div（一个有点隐藏在我的 MSPAINT 下）。

期望的成就

  • 标题和链接必须浮动在图像图标旁边，无论其文本的字体大小/行高如何。
  • 标题必须保持在一行。不允许包装。
  • 内部 div 必须彼此相邻排列，直到它们不再适合，然后换行到下一行。
  • 我可以将内容动态加载到容器 div 中，但该 div 需要能够处理不同数量的组件。当用户选择产品类型和版本时，组件的数量可以并且将会改变。

已知的

  • 一些组件标题会很短（7-ish 字符），有些会很长（27-ish 字符）。
  • 所有图标大约为 50x50 像素。
  • 对于某些选定的产品，最多会有 8-9 个组件 div。
  • 对于某些选定的产品，至少会有 3 个组件 div。

我已经放弃的东西

  • 好吧，我们可以固定组件 div 的宽度和高度，看看我是否关心。
  • 多个div。任何。组件 div 不需要有更多的嵌套 div。我是个白痴，那是愚蠢的（我确定答案是只有一个图像和 2 个段落元素的组件 div，图像向左浮动）。

我开发的代码又大又丑，因为我已经尝试并注释掉了很多东西。这是一个带有一些通用代码的jsFiddle，我认为这些代码对它造成的损害最小。

HTML

<div id="container">
    <div class="component" id="1">
        <div class="icon">
            <img src="img.png"></a>
        </div>
        <div class="title">
            <p>Product Item #1</p>
        </div>
        <div class="links">
            <p><a href="#">HTML</a> <a href="#">PDF</a></p>
        </div>
    </div>
    <div class="component" id="2">
        <div class="icon">
            <img src="img.png"></a>
        </div>
        <div class="title">
            <p>Product Item 2</p>
        </div>
        <div class="links">
            <p><a href="#">HTML</a> <a href="#">PDF</a></p>
        </div>
    </div>
    ...
    // More component divs here.
</div>​

CSS

#container {
    border: 1px solid red;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}

.component {
    border: 1px solid black;
    margin: 3px;
    overflow: auto;
    float: left;
    padding: 3px;
}

.icon {
    float: left;
}

非常感谢您的帮助！ 线框

4

1 回答 1

1

也许我会做这样的FIDDLE

组件结构：

<div class="component" id="1">
    <img class="icon" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/43/SemiPD-icon.svg/50px-SemiPD-icon.svg.png">
    <h1 class="title">Generic Product Name #1</h1>
    <p class="links">
        <a href="#">HTML</a><a href="#">PDF</a>
    </p>
</div>

我还对 css 部分进行了一些更改：

#container {
    border: 1px solid red;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    padding-bottom: 3px;
}

.component {
    border: 1px solid black;
    margin-top: 3px;
    margin-left: 3px;
    overflow: auto;
    float: left;
    padding: 5px;
}

.title {
    margin-left: 55px;
    font-size: 1.0em;
    font-weight: bold;
}

.links {
    margin-left: 55px;
}

.icon {
    float: left;
}

​</p>

于 2012-12-14T01:53:01.700 回答