文章/答案/技术大牛

发布

社区首页 >问答首页 >嵌套div的布局/格式问题。太多的div了？

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

Stack Overflow用户

提问于 2012-12-14 01:21:51

回答 1查看 475关注 0票数 0

好吧，现在，我有一个大的。

我正在处理一个基本的线框(附件)，我在执行这个布局时遇到了困难。基本上，我们有一个容器div，里面还有几个div。每个内部div都是产品的组件，并且都具有完全相同的结构化内容流--图像、产品标题和指向文档的链接。在线框中显示了7个组件div(其中一个隐藏在我的MSPAINT下面)。

期望的成就

标题和链接必须浮动在图像图标旁边，而不管字体大小/文本的线条高度。
标题必须保持在一行上。不允许包起来。
内部div必须在彼此之间排列，直到它们不再合适为止，然后换到下一行。
我可以动态地将内容加载到容器div中，但是div需要能够处理不同数量的组件。当用户选择产品类型和版本时，组件的数量可以也会发生变化。

所知

一些组件标题将是短的(7 Ish)，有些将是长的(27 Ish)。
所有图标将大约为50x50px。
对于某些选定的产品，最多将有8-9个组件div。
对于一些选定的产品，至少会有3个组件div。

我放弃的东西

好的，我们可以修复组件div的宽度和高度，看看我是否关心。
多个div。管他呢。组件div不需要有更多的嵌套div。我是个白痴，这太愚蠢了(我确信答案是一个组件div，只有一个图像和2个段落元素，图像在左边浮动)。

我开发的代码庞大而丑陋，因为我已经尝试并注释掉了许多东西。这是一个带有一些通用代码的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;
}

非常感谢你的帮助！

css

layout

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-12-14 01:53:01

也许我会做一些像小提琴这样的事情

组件结构：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13871331

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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