css - 在 960 网格中 float 问题 css

标签 css css-float 960.gs

这是我不想创建的:http://i.imgur.com/9KdL0UW.jpg ,这是我所拥有的:http://i.imgur.com/mRDWoRo.jpg .我的问题是新闻的布局,如您所见,它无法正常工作。我正在使用 960 网格,但不知道如何在 fiddle 中引用它,所以我发布的是一张图片。

HTML:

<div class="highlightednews grid_3">
            <h4>News Preview</h4>
            <h2><a href="#">Under The Dome: “Big Jim is just too fat, we have to fire him!”</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
        </div>
        <div class="highlightednews grid_3">
            <h4>News Preview</h4>
            <h2><a href="#">Under The Dome: “Big Jim is just too fat, we have to fire him!”</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
        </div>
        <div class="highlightednews grid_3">
            <h4>News Preview</h4>
            <h2><a href="#">Under The Dome: “Big Jim is just too fat, we have to fire him!”</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
        </div>

        <!--FEATURED NEWS-->
        <div class="featurednews grid_3 ">
            <h3>How am I gonna be an optimist about this? </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
            <p>posted 15th November </p>
        </div>

        <div class="featurednews grid_3 ">
            <h3>How am I gonna be an optimist about this? </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
            <p>posted 15th November </p>
        </div>  

        <div class="featurednews grid_3 ">
            <h3>How am I gonna be an optimist about this? </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
            <p>posted 15th November </p>
        </div>  

        <div class="featurednews grid_3 ">
            <h3>How am I gonna be an optimist about this? </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
            <p>posted 15th November </p>
        </div>  

        <div class="featurednews grid_3 ">
            <h3>How am I gonna be an optimist about this? </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
            <p>posted 15th November </p>
        </div>  

        <!--NEWEST-->

        <div class="newest grid_9">
            <h1><a href="#">Almost Human starting in one week!</a></h1>
            <p>posted 15th November by <a href="#">Andrew</a></p>
            <p>News Preview</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
            <p>Social Buttons</p>
            <ul>
                <li><a href="#">255 COMMENTS</a></li>
                <li><a href="#">READ MORE</a></li>
            </ul>
        </div>

            <div class="newest grid_9">
            <h1><a href="#">Almost Human starting in one week!</a></h1>
            <p>posted 15th November by <a href="#">Andrew</a></p>
            <p>News Preview</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
            <p>Social Buttons</p>
            <ul>
                <li><a href="#">255 COMMENTS</a></li>
                <li><a href="#">READ MORE</a></li>
            </ul>
        </div>

            <div class="newest grid_9">
            <h1><a href="#">Almost Human starting in one week!</a></h1>
            <p>posted 15th November by <a href="#">Andrew</a></p>
            <p>News Preview</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
            <p>Social Buttons</p>
            <ul>
                <li><a href="#">255 COMMENTS</a></li>
                <li><a href="#">READ MORE</a></li>
            </ul>
        </div>

CSS:

.grid_3{
background-color: orange;
margin-bottom:10px;}

.grid_9 {
background-color: pink;}

.highlightednews{
float:left;}

.featurednews{
float:right;
background-color:green;
clear:both;}

最佳答案

这里的问题与元素的嵌套方式有关。你需要有两个父 div 来保存你的内容

<!-- THIS IS THE LEFT COLUMN -->
<div class="grid_9">
    <div class="grid_3">
        NEWS ITEM
    </div>
    <div class="grid_3">
        NEWS ITEM
    </div>
    <div class="grid_3">
        NEWS ITEM
    </div>
    <div class="grid_9">
        Full width item
    </div>
</div>

<!-- THIS IS THE RIGHT COLUMN -->
<div class="grid_3">
    <div>FEATURED NEWS ITEM</div>
    <div>FEATURED NEWS ITEM</div>
</div>

关于css - 在 960 网格中 float 问题 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20333734/

相关文章:

javascript - 如何更改存储在数组中的变量的类名?

html - 仅使用 CSS3 Transitions(或至少,moSTLy)制作丰富的工具提示

css - float div的内容垂直居中

html - Ie7 float 正确的错误?

javascript - 如果某些 dom 节点 float : left or they go down to a new line?,我如何用 javascript 判断

html - 如何将文本设置为标题元素的阴影?

css - 如何在 CSS 中模拟媒体查询?

css - 具有 24 列或更多列的 Fluid 960 网格系统?

css - 定位问题

html - 背景图片不显示?