我的圖像（內divs）將不會流

Question

我試圖在我的網站上放置一系列圖像，我希望他們並排並自動換行到容器div的寬度。我爲每張圖片分別製作了一個div，因爲我還需要在每張圖片上留下文字。然而，我的圖像divs堆疊（好像每個人之間有一個硬回報，雖然沒有），而不是流動。

我一直在尋找答案，並且我讀過的所有內容都表明，對於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，等等，以及唯一改變的是框架內文本的寬度和位置。）

我嘗試在#frame1下輸入position:static;到#frame1，它不影響ything。 謝謝！

Answer 1

我會先重新考慮一下你的結構。這是我將如何去做的。您可以將鏈接元素本身用於縮略圖包裝 - 我建議您使用標題標籤定義標題等的重要性。搜索引擎像報紙一樣閱讀網站。如果你不聲明重要性，他們不會知道如何構建你的網站。我不會使用下劃線標籤或斜體標籤，因爲它們已被棄用，我不會使用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

Answer 2

好，嗯，首先，這裏是一個鏈接到工作小提琴：jsfiddle

你需要做的是，讓每一個元素，你要飄起了float: left;

我也要給每個#frame一個position: relative;，以便#title's可以根據其父元素定位自己。

正如@Antony也指出，你犯了一個語法錯誤margin-right; 45px;，第一個分號應該是一個正則冒號！