如何制作一个 div 将两个浮动 div 包裹在里面? [英] how to make a div to wrap two float divs inside?

查看：28 发布时间：2021/12/24 23:32:40 css layout html css-float

本文介绍了如何制作一个 div 将两个浮动 div 包裹在里面?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我不知道这是否是一个常见问题，但到目前为止我无法在网络上找到解决方案.我想将两个 div 包裹在另一个 div 中，但是里面的这两个 div 必须对齐在同一水平上(例如:左边一个占据了wrappedDiv 的20% 的宽度，右边一个占据了另一个80% 的宽度).为了达到这个目的，我使用了以下示例 CSS.但是，现在 wrap DIV 并没有将这些 div 全部包装起来.环绕 Div 的高度比内部包含的两个 div 小.我怎样才能确保包裹 Div 具有最大的高度作为包含的 div?谢谢！！！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"http://www.w3.org/TR/html4/loose.dtd"><html lang="zh-cn"><头><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>液体测试</title><style type="text/css" media="screen">身体{边距:0；填充:0；高度:100%；}#导航{向左飘浮;宽度:25%；高度:150px；背景色:#999；底边距:10px；}#内容{向左飘浮;左边距:1%；宽度:65%；高度:150px；背景色:#999；底边距:10px；}#裹{背景色:#DDD;高度:100%；}</风格><身体><div id="包裹"><h1>wrap1 </h1><div id="nav"></div><div id="content"><a href="index.htm"><返回文章</a></div>

解决方案

当一个块中有两个浮点数时，这是一个常见问题.修复它的最佳方法是在第二个 div 之后使用 clear:both.

<div style="display: block; clear: both;"></div>

它应该强制容器具有正确的高度.

I don't know if it's a common problem, but I can't find the solution in web so far. I would like to have two divs wrapped inside another div, however these two divs inside have to be align the same level (for example: left one takes 20%width of the wrappedDiv, right one take another 80%). To achieve this purpose, I used the following example CSS. However, now the wrap DIV didn't wrap those divs all. The wrap Div has a small height than those two divs contained inside. How could I make sure that the wrap Div has the largest height as the contained divs? Thanks!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>liquid test</title>
    <style type="text/css" media="screen">
        body
        {
            margin: 0;
            padding: 0;
            height:100%;
        }
        #nav
        {
            float: left;
            width: 25%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }

        #content
        {
            float: left;
            margin-left: 1%;
            width: 65%;
            height: 150px;
            background-color: #999;
            margin-bottom: 10px;
        }       
        #wrap
        {
          background-color:#DDD;
          height:100%;
        }

</style>
</head>
<body>
<div id="wrap">
    <h1>wrap1 </h1>
    <div id="nav"></div>
    <div id="content"><a href="index.htm">&lt; Back to article</a></div>
</div>
</body>
</html>

解决方案

It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:both after the second div.

<div style="display: block; clear: both;"></div>

It should force the container to be the correct height.

这篇关于如何制作一个 div 将两个浮动 div 包裹在里面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何制作一个 div 将两个浮动 div 包裹在里面? [英] how to make a div to wrap two float divs inside?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

如何制作一个 div 将两个浮动 div 包裹在里面? [英] how to make a div to wrap two float divs inside?

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭