html - 图像(在 div 内)堆叠而不是内联

Question

我正在尝试在我的网站上放置一系列图像，我希望它们并排排列并自动换行至容器 div 的宽度。我为每个图像制作了一个单独的 div，因为我还需要文本与每个图像保持一致。但是，我的图像 div 是堆叠的(好像每个 div 之间有一个硬返回，虽然没有)，而不是流动的。

我一直在寻找答案，我读过的所有内容都说 div 的默认定位是静态的，这意味着流将是自动的。但是……好像不行。

这是我的 HTML:

<div id="contentArea">

<div id="frame2">
<div id="f2title">
<u>Everything Changed</u>
  <br> <i>A reflection on life's contingencies.</i>
  </div>
  </div>

<a href="foreveramen.html"><div id="frame1">
<div id="f1title">
<u>Forever Amen</u>
  <br> <i>A wedding song, written for my brother and his wife.</i>
  </div>
  </div></a>

<a href="friendswithyou.html"><div id="frame3">
<div id="f3title">
<u>Friends With You</u>
  <br> <i>Warm, caring friendships often happen without trying.</i>
  </div>
  </div></a>

这是我的 CSS:

#contentArea {
    margin-top: 5px;
    margin-left: 45px;
    margin-right; 45px;
    overflow: auto;
    width: 540px;
    height: 590px;
    position: relative;
    background: rgba(255, 255, 255, 0.3);
    font-family:Cambria, "Avenir Black", Futura, "Gill Sans", sans-serif;
    font-size: 0.8em;
}
#frame1 {
    background-image:url(images/frame1thumb.png);
    width:250px;
    height:217px;
}
#f1title {
    width:140px;
    height:188px;
    margin-left:55px;
    margin-right:auto;
    margin-top:70px;
    font-size:14px;
    text-align:center;
    overflow:auto;
    position:absolute;
}

(其他框架依此类推。框架 2、3 等有样式，唯一改变的是框架内文本的宽度和位置。)

我尝试在我的 CSS 中输入 position:static;，在 #frame1 下，但它没有任何影响。谢谢!

Answer 1

我会首先重新考虑一下您的结构。这是我会怎么做。您可以将链接元素本身用于缩略图包装 - 我建议您使用标题标签定义标题等的重要性。搜索引擎像阅读报纸一样阅读网站。如果您不声明重要性，他们将不知道如何构建您的网站。我不会使用下划线标记或斜体标记，因为它们已被弃用，我也不会使用 br 换行符，因为它是不必要的，而且它不是真的换行符。您可以在 .css 文件中声明它。

jsfiddle HERE

魔法基本上是 float: left;但这将为您打下更坚实的基础。你看，例如 - 如果你决定不再需要斜体 - 你将不得不从 html 中删除所有这些标签。这样你只在一个地方声明它。此外，不需要重复所有 block 共享的样式。所有的街区都和我想象的一样。也许他们有不同的背景图像..但其余的是一样的。考虑模块化。

HTML

<section class="content">

    <a class="link-wrapper one"
        alt="song thumbnail"
        href="#">
            <h2>Song Title</h2>
            <h3>Tag line etc I'm guessing</h3>
    </a>

    <a class="link-wrapper two"
        alt="song thumbnail"
        href="#">
            <h2>Song Title</h2>
            <h3>Tag line etc I'm guessing</h3>
    </a>

</section>

CSS

/* moves padding inside the box -
   start your project off right */
* { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
} 

html, body {
    margin: 0;
    padding: 0;
}

.content {
    padding: 1em;
}

.link-wrapper {
    position: relative;
    display: block;
    float: left;
    width:250px;
    height:217px;
    text-align: center;
    margin-right: 1em;
    text-decoration: none;
}

.link-wrapper h2 { /* heiarchy of text importance is how SEO works */
    font-weight: normal;
    text-decoration: underline;
    padding-top: 1em;

}

.link-wrapper h3 { /* heiarchy of text importance is how SEO works */
    font-weight: normal;
    font-style: italic;
}


/* to differentiate + unique classes for thumbnails */

.one {
    background-image:url(http://placehold.it/250x217/ff0066);
}

.two {
    background-image:url(http://placehold.it/250x217/99edee);
}

希望对您有所帮助。 -nouveau