960网格,img问题
最近下载了960网格系统来玩一下。
现在我遇到的问题是,歌手歌曲作者标签关闭后,图像不会出现在左侧。图像之前的两列加起来正好是 12
以下代码应在顶部显示徽标图像,在其右侧显示歌手歌曲作者描述。然后在新行上我应该看到灰色的图像占位符和一段文字。然而,它目前是混乱的
如果我需要更改任何内容以适应图像,有人可以告诉我
这里是页面的链接 http://digitalgenesis.com.au/sites/alice
这是我基本上希望它如何流动的链接 http://digitalgenesis.com .au/sites/alice/img/960img.gif
页面代码
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<title></title>
</head>
<body>
<div class="container_12">
<div class="grid_5"> <img src="img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="grid_5"> <img src="img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
</div>
</body>
</html>
第二个网格 5 应分隔在新行上
recently downloaded the 960 grid system to play around with.
Now the problem im having is that the image is not coming across to the left after the singer songwriter tag is closed off. Both columns before the image add up to 12 exactly
The following code should display a logo image up top, singer songwriter description to the right of it. Then on a new line i should see image placeholder in gray and a paragraph of text to the write of that. However it is currently mixed up
Can anybody advise me if i need to change anything to accommodate images
heres a link to the page http://digitalgenesis.com.au/sites/alice
and heres a link to how i basically want it to flow http://digitalgenesis.com.au/sites/alice/img/960img.gif
Page code
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<title></title>
</head>
<body>
<div class="container_12">
<div class="grid_5"> <img src="img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="grid_5"> <img src="img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div>
</div>
</body>
</html>
the second grid 5 should be seperated on a new row
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
试试这个:
将重置放在 960.css 之前,然后在第一行后面添加一个清除。
单击此处查看示例 jsfiddle
这是我的代码:
Try this:
Put your reset before 960.css and then add a clear after the first line.
click here to See example jsfiddle
Here's my code:
您正在寻找
clearfix
类来删除下一组 divYou're looking for
clearfix
class to drop the next set of divs down