嵌套div的布局/格式化问题。太多的div？

Question

现在好了，我有点大了。

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

期望的成就

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

众所周知的

• 有些组件标题会很短（7-ish chars），有些标题会很长（27-ish chars）。
• 所有图标大约为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;
}

非常感谢你的帮助！

Answer 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;
}