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中，如何在没有空格的情况下并排放置三张图像？

1 个答案: