2

我一直在尝试几种不同的方法来以这种方式定位 6 个不同的元素：

图表

我尝试使用两个相互堆叠的独立无序列表，但我无法让它们随着页面拉伸正确缩放。我也尝试过使用表格，但我似乎无法将元素放在它们各自 tds 中心的所有位置。

这是我的无序列表中的 CSS：

.button ul {
    height: auto;
    list-style: none;
}

.button li {
    display: inline-block;
    list-style: none;
    margin: 0 18% 0 0;
    padding: 0;
    vertical-align: top;
}

这些都包含在其中：

.newfooterright {
    float: left;
    width: 33.333333%;
    top: 0%;
    left: 0%;
    height: 250px;
    padding: 0 0 0 0;
    margin: 0;
    font-family: RobotoLight;
    text-decoration: none;
    text-transform: none;
    font-size: 1.5em;
    text-align: center;
    color: #ffffff;
    vertical-align: middle;
}

这是使用此方法的 jsfiddle： jsFiddle for unordered list

我认为无序列表可能是要走的路……我只是不确定如何让所有元素在每个 li 的中心对齐。底部的元素似乎卡在了 li 的右下角。底部元素也是来自 google+、twitter 和 facebook 的小部件，所以我不确定这是否会影响它们的位置。

基本上元素需要能够做到这一点：

  • 根据它们的间距缩放窗口宽度（在某种程度上，我不需要超级小的手机布局或其他东西。像 padding-right 或 margin-right 之类的东西？）
  • 当元素缩放时，底部元素需要与中心的顶部元素保持对齐
  • 定位如图！

任何有关如何干净利落地定位的建议将不胜感激！

太感谢了！

4

3 回答 3

1

通常，如果要选择每 3 个元素，则必须使用:nth-child(). 在括号中，您可以输入 和 的任意组合n。还有一些关键字，例如oddand even。所以在这种情况下，你将有 3 个不同的:nth-child()选择器。它看起来像这样

li:nth-child(6n+1), li:nth-child(6n+2), li:nth-child(6n+3) {
  color:red;
}

6n选择每第六个元素，然后添加+1该数字。因此，如果您插入1，您将获得7第一个选择器、8第二个选择器和9第三个选择器。

这是一个演示使用中的小提琴

这是一篇nth-child更深入地解释的文章

于 2013-05-31T01:40:48.123 回答
1

看起来你的李应该已经准备好崩溃了。
你可以给你的 li 一个固定的高度和宽度（如果你愿意，可以创建盒子），然后为每个图像添加一个样式以具有一个相对位置，并使用 top 和 left 将它们定位（记住，百分比可以为你缩放）。我已经给出了有关如何实现这一点的提示，因为您想边做边学，但是如果您需要 CSS，请告诉我！

于 2013-05-31T02:09:30.053 回答
1

这是您可以做到的一种方法，我建议使用以下 HTML 脚手架：

<div class="newfooterleft">
    <ul class="button">
        <li><a class="twitterbutton" href="#"></a></li>
        <li><a class="facebookbutton" href="#"></a></li>
        <li><a class="googleplusbutton" href="#"></a></li>
    </ul>
    <ul class="widget">
        <li>(I put the corresponding widget here)</li>
        <li>(I put the corresponding widget here)</li>
        <li>(I put the corresponding widget here)</li>
    </ul>
</div>

和以下CSS：

.newfooterleft {
    width: 40%;
    border: 1px solid red;
    overflow: auto;
}

.twitterbutton {
    background: url("http://www.placekitten.com/100/100") no-repeat;
    background-size: 100%;
}
.twitterbutton:hover {
}

.facebookbutton {
    background: url("http://www.placekitten.com/100/100") no-repeat;
    background-size: 100%;
}
.facebookbutton:hover {
}

.googleplusbutton {
    background-image: url("http://www.placekitten.com/100/100");
    background-size: 100%;
}
.googleplusbutton:hover {
}

.newfooterleft ul {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0;
}
.newfooterleft ul li {
    display: table-cell;
    width: 33.3333%;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border-left: 1px solid red;
}
.newfooterleft ul li:first-child {
    border-left: none;
}
ul.button li {
    height: 100px;
}
.button li a {
    display: inline-block;
    width: 62px;
    height: 62px;
}
.button {
    border-bottom: 1px solid red;
}
ul.widget li {
    background-color: white;
    height: 150px;
}

在这种情况下，我正在调整无序列表以使其表现得像表格和表格单元格。

除非宽度变得太窄，否则它工作得相当好，但这可能没问题，具体取决于您的应用程序。

您可以使用最小宽度来限制它。

您也可以尝试使用display: table-row.

演示小提琴：http: //jsfiddle.net/audetwebdesign/2U3D9/

于 2013-05-31T02:15:30.093 回答