Question

我在新网站上工作，遇到了一些我无法理解的事情。这是链接：

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

当我将浏览器的大小调整为＆＃34;移动宽度＆＃34;时，它的宽度小于椭圆的小行的宽度＆＃34;标签＆＃34;就在我的网站菜单下方，我希望标签能够回流到两行（或根据需要多少行）。相反，他们顽固地保持在一排，并从窗户的右侧突出。

我没有给封闭的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;
}

欢迎任何想法或建议！

谢谢，亚当

Answer 1

我明白你的意思。获得你想要达到的目标的最好方法是在所需的断点处改变元素的宽度和边距。

因此，对于“媒体宽度”，您可以将类设置为重新调整大小。通过这样做，元素将自然地沿着文档流动。

例如：

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

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

或者一些与您的设计有关的类似测量。

为什么我的锚标签没有回流？

1 个答案: