CSS创建彼此相邻的图像链接答案

【问题标题】：CSS creating image links next to each otherCSS创建彼此相邻的图像链接
【发布时间】：2015-01-03 01:34:04
【问题描述】：

我正在尝试创建一组链接到网站其余部分的四个图标。目前，编码一切正常，直到所有四个都设置好，然后只有一个工作。

我正在使用 Foundation 创建一个响应式网站。

   <div class="row">
            <div class="large-6 large-offset-6 medium-6 medium-offset-6 columns">
            <div id="portfolio_link">
            <a href="#portfolio_page">
                <img src="img/portfolio.png" style="width:80px">
            </a>
            </div>
            </div>

            <div class="large-6 large-offset-6 medium-6 medium-offset-6 columns">
            <div id="contact_link">
            <a href="#contact_page">
                <img src="img/Contact.png" style="width:80px">
            </a>
            </div>
            </div>

            <div class="large-6 large-offset-6 medium-6 medium-offset-6 columns">
             <div id="home_link">
            <a href="#home_page">
                <img src="img/home.png" style="width:87px">
            </a>
            </div>
            </div>

            <div class="large-6 large-offset-6 medium-6 medium-offset-6 columns">
            <div id="about_link">
            <a href="#about_page">
                <img src="img/about.png" style="width:80px">
            </a>
            </div>
            </div>

【问题讨论】：

定义“作品”。另外，相关的 CSS 在哪里？

标签： html css image hyperlink zurb-foundation

【解决方案1】：

您在 _settings.scss 中的列设置是什么？如果你有 large-6，这将占据你页面的 50%。您可以将其中的每一个设置为 large-3，或者将总列更改为 24。

$total-columns: 12;

【讨论】：