爲什麼我的錨定標記不會迴流？

我在我的新網站上工作，遇到了一些我無法想象的東西。這裏的鏈接：爲什麼我的錨定標記不會迴流？

http://www.adamabrams.com/aadc/

當我調整我的瀏覽器「移動寬度」，因此它比略低於我的網站菜單橢圓形的「標籤」的小排的寬度窄，我要的標籤重排成兩排（或根據需要）。相反，他們固執地保持在一排，並突出窗戶的右側。

我還沒有給封閉的div一個固定的高度......我知道這一定是簡單的東西，但我很難過！

這裏的HTML：

<main class="content" itemtype="http://schema.org/Blog" itemscope="itemscope" itemprop="mainContentOfPage" role="main"> 
<div class="post_tags"> 
<a class="tagintro" href="#">Select area of expertise:</a> 
<a class="database" title="database projects" href="http://adamabrams.com/aadc/tag/database/">database</a> 
<a class="ecommerce" title="ecommerce projects" href="http://adamabrams.com/aadc/tag/ecommerce/">ecommerce</a> 
<a class="mobile" title="mobile projects" href="http://adamabrams.com/aadc/tag/mobile/">mobile</a> 
<a class="website" title="website projects" href="http://adamabrams.com/aadc/tag/website/">website</a> 
</div>

...這是所有涉及的CSS，我認爲：

/* TAG BUTTONS */ 

/* Styling of the buttons, everywhere */ 
.entry-tags a, .post_tags a { 
    color: #3D3D3D; 
    font-weight: bold; 
    background-color: #EECE88; 
    padding: .35em .5em; 
    border-radius: .7em; 
    -moz-border-radius: .7em; 
    -webkit-border-radius: .7em; 
} 

.entry-tags a:hover, .post_tags a:hover { 
    color: black; 
    background-color: orange; 
} 

/* TAGS "HEADER" ON TAG.PHP PAGE */ 

/* Layout of buttons area */ 
.post_tags { 
    text-align: center; 
    margin-bottom: 2em; 
} 

/* Spacing between buttons */ 
.post_tags a { 
    margin-right: 1em; 
} 

.post_tags a:first-child, 
.post_tags a:last-child { 
    margin-right: 0; 
} 

/* Currently displayed tag */ 
body.tag-ecommerce a.ecommerce, 
body.tag-database a.database, 
body.tag-mobile a.mobile, 
body.tag-website a.website { 
    color: black; 
    background-color: orange; 
} 

a.tagintro, a.tagintro:hover { 
    background-color: transparent; 
    color: white; 
}

任何意見或建議，非常歡迎！

感謝，亞當

來源

2014-09-28 Adam Abrams

我看你要什麼。獲得你想要實現的最好方法是在所需的斷點處更改元素的寬度和邊距。

因此，對於您的「媒體寬度」，您將您的類設置爲重新調整大小。通過這樣做，元素將自然流向文檔。

例如：

@media only screen and (max-width: 480px) { /* Your break-point for mobile */ 

    .ecommerce, 
    .database, 
    .mobile, 
    .website{ 
     width: 48%; 
     margin-left: 1%; 
     margin-right: 1%; 
    } 
}

或一些類似的測量是有道理的與您的設計。

來源

2014-09-28 04:59:03 AndrewAchilles

謝謝安德魯。我會試試這個方法。我很想知道，爲什麼標籤不能流動，就好像它們是文本一樣......它看起來很簡單（儘管我知道簡單的CSS往往難以捉摸！） – 2014-09-28 06:56:39

實際上，只是將它們懸浮在手機寬度會訣竅並使它們「流動」......但它確實保持它們左對齊，當我寧願它們仍然保持居中（我已將文本對齊它們的整個容器）。只有當它們被賦予一個浮點數時纔會發生這種流動，我認爲這是預期的CSS行爲，但會覆蓋文本對齊。 – 2014-09-28 07:01:06

爲什麼我的錨定標記不會迴流？

回答

相關問題