在基金会5中，您如何将三幅图像并排放置而没有空格？

我一直在使用Foundation 5一个月左右，但我无法将三个图像并排放置，没有空格。请有任何想法吗？在基金会5中，您如何将三幅图像并排放置而没有空格？

这里之前加入基金会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.css等）的代码中断。

来源

2015-09-14 Tirso

你到目前为止发现了什么？你有尝试过什么吗？ – dakab

请显示一些代码或jsfiddle – WookieCoder

我相信你正在寻找基金会的块网格功能。 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标签，而普通网格使用内部div传统row和columns类。

来源

2015-09-25 20:24:38 Waterpile

感谢Mosawg！抱歉，我无法尽早回复，但您的建议完美无缺。 – Tirso

没问题。如果你可以将我的问题标记为答案，那就太棒了！得建立该代表。祝你好运！ – Waterpile

在基金会5中，您如何将三幅图像并排放置而没有空格？

回答

相关问题