当前位置：文江博客话题详情

创建一个带有两个内部 div 的 div。背景/内容必须“遵循”

发布于 2024-12-18 17:41:09 字数 954 浏览 0 评论 0原文

我怎样才能像这样：

[ DIV-1 ]

[ DIV -2] 侧面菜单 2 内 [/DIV - 2]

[DIV -3] 里面主要内容3 [/ DIV -3]

[/ DIV-1 ]

所以，假设 DIV 3 的内容非常长 - 比 DIV 2 多得多。

我怎样才能做到这一点DIV 2 的高度在 DIV 3 之后吗？

现在我已经尝试使用 980.css 网格，尽管它不起作用。

这就是我现在所拥有的：

        <div class="column grid_12">

                <div class="column grid_3" style="background-color:gray;">
                MENU!
                </div>
                <div class="column grid_8" style="background-color:black;">
                CONTENT!    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

            </div>

        </div>




</div><!-- End Row -->

最诚挚的问候

原文

How can I make like this:

[ DIV-1 ]

[ DIV -2]
SIDE MENU INSIDE 2
[/ DIV - 2]

[ DIV -3]
MAIN CONTENT INSIDE 3
[/ DIV -3]

[/ DIV-1 ]

So, let's say that DIV 3 is having a really long content - much more than DIV 2.

How can I do so the background and border etc of DIV 2 is following the height of DIV 3?

For now I have tried with the 980.css grid, although it did not work.

This is what I have now:

        <div class="column grid_12">

                <div class="column grid_3" style="background-color:gray;">
                MENU!
                </div>
                <div class="column grid_8" style="background-color:black;">
                CONTENT!    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

            </div>

        </div>




</div><!-- End Row -->

Kindest Regards

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

硪扪都還晓 2024-12-25 17:41:09

也许你可以使用JavaScript并将DIV2的高度设置为DIV3的高度。

喜欢：

$(document).ready(function(){
   var MyHeight = $('.grid_3').height();
   $('.grid_8').height(MyHeight);
});

maybe you can use JavaScript and set the height of DIV2 to the height of DIV3.

Like:

$(document).ready(function(){
   var MyHeight = $('.grid_3').height();
   $('.grid_8').height(MyHeight);
});

回复收藏 0 原文

酷到爆炸 2024-12-25 17:41:09

如果第二列始终比第一列长，您可以使用类似以下示例的内容：

<html>
<head>

    <style>
        .container {overflow:hidden; position:relative;}
        .col1 {position:absolute; width:200px; height:100%; top:0px; left:0px; background:#ffbebe;}
        .col2 {width:400px; margin:0px 0px 0px 200px; background:#ffff00;}
    </style>

</head>

<body>

    <div class="container">

        <div class="col1" >
           MENU!<br />
        </div>

        <div class="col2" >
            CONTENT!<br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

    </div>

</body>
</html>

If the second column will always be longer than the first, you can use something like the following example:

<html>
<head>

    <style>
        .container {overflow:hidden; position:relative;}
        .col1 {position:absolute; width:200px; height:100%; top:0px; left:0px; background:#ffbebe;}
        .col2 {width:400px; margin:0px 0px 0px 200px; background:#ffff00;}
    </style>

</head>

<body>

    <div class="container">

        <div class="col1" >
           MENU!<br />
        </div>

        <div class="col2" >
            CONTENT!<br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>

    </div>

</body>
</html>

回复收藏 0 原文

眼趣 2024-12-25 17:41:09

最好也是最简单的选择是使用假列。

回复收藏 0 原文

靑春怀旧 2024-12-25 17:41:09

就我个人而言，我喜欢 www.ejeliot.com 中的等高列

，我在 JSFiddle 上设置了一个示例 - http ://jsfiddle.net/spacebeers/s8uLG/1/

您将容器设置为隐藏，然后将溢出设置为隐藏，然后在每个 div 上添加负 margin-bottom 和相等的正 padding-bottom。

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
   <div>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
   </div>
</div>

假列也很好，并且可能更容易设置，但如果您真的非常反对使用图像，那么这是一个非常好的方法。

Personally I like the equal height columns from www.ejeliot.com

I've set an example up on JSFiddle - http://jsfiddle.net/spacebeers/s8uLG/1/

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
   <div>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
        <p>Content 3</p>
   </div>
</div>

Faux Columns is also good and probably easier to set up but if you're really dead against using an image this is a pretty good method.

回复收藏 0 原文

~没有更多了~