我一直在把这个网站和六个图像系列(graphic1.jpg、graphic2.jpg 等)放在一起，我想把它放在一个框架中，就像附加的图像一样，这样文本总是保持不变在图像下方，即使在移动设备上，如果图像被压缩成单个文件，也可以使文本在视觉上更加清晰。
尽管我使用的是居中代码，但我在页面居中底部的两个按钮上也遇到了问题。
此外，是否有可以指向我的资源来将导航栏的宽度设置为最大值，以便网站可以在其后面/外部具有边缘和背景？我认为我的代码有问题。
感谢您提供的任何帮助!
布鲁克斯
<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]
最佳答案
首先我会检查你的语法... <divclass="small-8...是无效的。这可能会导致布局中断。另外……用“行”类检查你的 div，因为在这个例子中似乎有很多额外的东西……
我数 9 打开 <div>标签，只有 6 个关闭 /div>标签...
对于图像问题，为图像设置某种 CSS 以根据需要定位它们，然后将该图像及其文本放置在页面的 block 元素中。现在您的文本可以在 <li> 中自由流动标签和图像也可以自由 float 。如果他们周围没有某种容器，你就会分离。
关于css - Zurb Foundation 图像和文本框架、居中问题和导航栏最大宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24437848/