0

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

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

4

2 回答 2

0

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

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

我也会给每#frame一个 aposition: relative;以便他们#title's可以根据他们的父元素定位自己。

正如@Antony 还指出的那样，您犯了语法错误margin-right; 45px;，第一个分号应该是常规冒号！

于 2013-06-01T21:59:21.833 回答
0

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

jsfiddle在这里

魔术基本上是浮动：左；但这将为您奠定更坚​​实的基础。例如，您会看到 - 如果您决定不再需要斜体 - 您将不得不从 html 中删除所有这些标签。这样，您只需在一个地方声明它。此外，不需要重复所有块共享的样式。我想象的所有块都是一样的。也许他们有不同的背景图像..但其余的都是一样的。考虑模块化。

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

我希望这有帮助。-新风格

于 2013-06-02T00:43:43.567 回答