Question

好的，所以我试图设置5个div来呈现'W'的形状。看看我的视线，以获得我在这里的意思：http://joshadik307.github.io。现在我正在使用一个表，但这没有效果，因为它没有完全符合我的要求，当我尝试重新格式化所有工作在不同的屏幕尺寸时会引起问题。

无论如何，在我的网站上，标题下方有5个形状为W的div。我希望有这些，以便它们总是显示一个完美的W（IE每个div在它上面或下面的两个之间始终均匀分布），以便W在屏幕尺寸扩大时伸展。

Answer 1

1-创建四个相等宽度的潜水

2-浮动他们

3-在每个div中创建具有所需边距的相等大小的div

例如在第一个div边缘顶部将为0，在第二个div边缘顶部将是最大等等....

Answer 2

内联块 - 被误解和不足的显示类型：

<div class="w-wrapper">
 <div class="callout">1</div>
 <div class="callout">3</div>
 <div class="callout">5</div>
 <div class="callout">2</div>
 <div class="callout">4</div>
</div>

CSS

.w-wrapper {
    text-align: center;
}

.callout {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin: 2em 5%;
    border: 1px solid black;
}

http://jsfiddle.net/ryanwheale/jq6eyud2/

将div放在同一行

2 个答案: