Question

我一直把这个网站放在一起，六个图像系列（graphic1.jpg，graphic2.jpg等）我想把它放到一个框架中，就像附图一样，这样文字如果图像被压缩到单个文件中，即使在移动设备上，也始终保持在图像下方，并且还可以清晰地显示哪些文本到达什么图像。

enter image description here

尽管我使用了中心代码，但我在页面底部的两个按钮上也遇到了问题。

此外，是否有一个资源我可以指向将导航栏的宽度设置为最大值，以便该站点可以有边缘和背后/外的背景？我认为那里有我的代码。

感谢您提供的任何帮助！

布鲁克斯

<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tribal Droid Studio</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <script src="js/vendor/modernizr.js"></script>
  </head>

  <body>
    <div class="twelve columns centered">
          <nav class="top-bar">

            <ul class="title-area">
                <li class="name"><h1><a href="index.html">Tribal Droid Studio</a></h1></li>
            </ul>

                <section class="top-bar-section">

                    <ul class="right">

                        <li><a href="#">Visual Development</a></li>
                        <li><a href="#">Sign Work</a></li>
                        <li><a href="#">Our Process</a></li>
                        <li><a href="#">Contact Us</a></li>
                        <li><a href="#">About Tribal Droid</a></li>
                    </ul>

                </section>

    </nav>

    <div class="row">

    <div class="row">
        <div class="large-5 columns">

        <h2>Tribal Droid Studio</h2>
        <p> asdf asd fasdfasdf asfghwgreqtrgafdbsfgqeth asdf gqfad </p>

    </div>

    <div class="large-7 columns">

    </div>

    <div class="large-12 columns">

        <img src="img/tribalhead3.jpg"/>

    </div>

    <hr />

    <div class="row">


        <h2>Why Tribal Droid Studio?</h2>

        <div class="large-12 columns">

            <ul class="large-block-grid-3">

                        <li><img src="img/graphic1.jpg" />Graphic Design, Logo Design, and     Branding all go into creating a visual identity.</li>
                </panel>


                <li><img src="img/graphic2.jpg" />But it can be hard to get noticed in a sea of things demanding attention.</li>


                <li><img src="img/graphic3.jpg" />You may find developing one of your own to be lacking in professionalism or soul.</li>


                <li><img src="img/graphic4.jpg" />At the heart of your visual identity is a story.</li>

                <li><img src="img/graphic5.jpg" />Tribal Droid Studio is a team of artists and storytellers determined to turn your visions into visuals.</li>

                <li><img src="img/graphic6.jpg" />Once your identity is ready, we have the signmaking tools and experience to bring it to life.</li>     
        </div>

        <div class="row">

                <divclass="small-8 small-centered columns">

        <a class="button round"="contact.html">Contact us to get started!</a>
        <a class="button round"="#">View our gallery of work</a>
                </div>
        </div>

        <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
                          $('.your-class').slick({
                                                 setting-name: setting-value
                                                 });
                          });

    </script>

    <script>
      $(document).foundation();
    </script>
  </body>
</html>

![what I'd like the images and text to do together (font unimportant)][1]

Answer 1

首先，我会查看您的语法... <divclass="small-8...无效。这可能会导致布局中断。另外......用“行”类检查你的div，因为在这个例子里似乎有很多额外的东西......

我统计了9个开放的<div>代码，但只有6个/div>个代码...

对于图像问题，请为图像设置某种css以根据需要定位它们，然后将该图像及其文本放在页面的块元素中。现在，您的文本可以在<li>标记内自由流动，图像也可以自由浮动。如果没有某种容器，你就会分开。

Zurb Foundation图像和文本框架，居中和导航栏最大宽度问题

1 个答案: