click here to See example jsfiddle

Question

最近下载了960网格系统来玩。

现在我遇到的问题是，在歌手词曲作者标签关闭后，图像不会传到左侧。图像前的两列完全相加

以下代码应在顶部显示徽标图像，歌手歌曲作者描述在其右侧。然后在一个新行上，我应该看到灰色的图像占位符和写入的文本段落。然而，目前它已经混淆了

任何人都可以告诉我是否需要更改任何内容以适应图像

这是指向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应该分隔在一个新行

上

Answer 1

您正在寻找clearfix课程来删除下一组div

<div class="container_12">
<div class="grid_5"> <img src="img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
<div class="clearfix"></div>
<div class="grid_5"> <img src="img/img.jpg" alt="#" /></div>
<div class="grid_7"> Lorem ipsum dolor sit amet,.... </div>
</div>

Answer 2

试试这个：

将您的重置置于960.css之前，然后在第一行之后添加一个清除。

click here to See example jsfiddle

这是我的代码：

<div class="grid_5"> <img src="http://digitalgenesis.com.au/sites/alice/img/namelogo.png" alt="#" /></div>
<div class="grid_7"> Singer/Songwriter</div>
    <div class="clear"></div>
    <div class="grid_5"> <img src="http://digitalgenesis.com.au/sites/alice/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>

960网格，img问题

2 个答案:

click here to See example jsfiddle