Question

我正在尝试在我的网站上放置一系列图像，我希望它们并排流动并自动换行到容器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等具有样式，唯一改变的是帧内文本的宽度和位置。）

我尝试在position:static;下的CSS中键入#frame1，但不会影响任何内容。谢谢！

Answer 1

好的，首先，这里是一个工作小提琴的链接：jsfiddle

你需要做的是，为了给每个元素，你想浮动一个float: left;

我还会给每#frame一个position: relative;，以便#title's可以根据父元素定位自己。

正如@Antony所指出的那样，你在margin-right; 45px;时出现语法错误，第一个分号应该是常规冒号！

Answer 2

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

jsfiddle HERE

魔法基本上是漂浮物：左;但这将为你奠定更坚实的基础。你看，例如 - 如果你决定不再需要斜体 - 你必须从html中删除所有这些标签。这样您只能在一个地方声明它。此外，不需要重复所有块共享的样式。我想象的所有街区都是一样的。 Mabybe他们有不同的背景图像..但其余的是相同的。想想模块化。

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

我的图像（里面的div）不会流动

2 个答案: