在 Foundation 5 中，如何不带空格地并排放置三个图像？

Question

我已经使用 Foundation 5 大约一个月了，但我无法在没有空格的情况下并排放置三张图片。有什么想法吗？

这是添加 Foundation 5 之前的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
margin: 0;
border: 0;
padding: 0;
}
.left {
float:left;
width: 15%;
}
.center {
float: left;
background:white;
width: 70%;


}
.main {
float:left;
width:70%;
}
aside {
float:left;
width:30%;
}
.right {
float: left;
width: 15%;
}
</style>
</head>
<body>
<div class="left"><img src="_images/topo_l.jpg" alt="topo map" /></div>
<div class="center">
<div class="header">
<h1>Header H1</h1>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. </p>
</div>
<aside>
<ul>
  <li>Aside li items here</li>
  <li>Aside li items here</li>
  <li>Aside li items here</li>
  <li>Aside li items here</li>
  <li>Aside li items here</li>
  <li>Aside li items here</li>
</ul>
</aside>
</div>
<div class="right"><img src="_images/topo_r.jpg" alt="topo map" /></div>
</body>
</html>

此时看起来没问题，但在我包含 Foundation（foundation.css 等）之后，代码中断了。

Answer 1

我相信您正在寻找 Foundation 的 Block Grid 功能。 http://foundation.zurb.com/docs/components/block_grid.html

您也可以使用常规网格，并在 class="row" 中修改为类似 class="row small-collapse" 的内容。示例如下。

<!-- BEGIN BLOCK GRID EXAMPLE -->
    <div class="row">
    <ul class="small-block-grid-3">
        <li style="background-color:blue;height:100px;"></li>
        <li style="background-color:red;height:100px;"></li>
        <li style="background-color:green;height:100px;"></li>
    </ul>
    </div>
<!-- END BLOCK GRID EXAMPLE -->

<!-- BEGIN REGULAR GRID EXAMPLE -->
    <div class="row small-collapse">
        <div class="small-4 columns" style="background-color:blue;height:100px;"></div>
        <div class="small-4 columns" style="background-color:red;height:100px;"></div>
        <div class="small-4 columns" style="background-color:green;height:100px;"></div>
    </div>
<!-- END REGULAR GRID EXAMPLE -->

方块网格使用ul和li标签，而规则网格使用传统的row和columns类里面的div ].

在 Foundation 5 中，如何不带空格地并排放置三个图像？

In Foundation 5, how do you place three images side by side without spaces?

zurb-foundation