Question

我正在尝试实现附加的desired.png上的内容（特别是使另一个框围绕2个内盒）。

enter image description here

我使用以下代码，但2个内盒周围没有外盒。我怎样才能实现图像上的内容？

砂箱

            <style type="text/css">
            #wrap {
               //width:600px;
               //margin:0 auto;
               border:1px solid red;
               //height:100px;
            }
            #left_col {
               float:left;
               width:300px;
               border:1px solid black;
            }
            #right_col {
               float:right;
               width:300px;
               border:1px solid orange;
            }
    </style>
</head>

<body>



    <div id="wrap">
        <span id="left_col">
            ...
        </span>
        <span id="right_col">
            ...
        </span>
    </div>

</body>

Answer 1

Css没有// Comment格式。你只能使用/ * * /。这将是一个错误。您还必须设置包含容器的高度。因为浮动元素不适用于外部容器的高度。并且不要错过内部容器的高度。我修改过的css将是：

#wrap {

border:1px solid red;
height: 100px;
width: 600px;
padding: 5px;
}
#left_col {
float:left; 
display: inline-block;
width:295px;
height: 100px;
border:1px solid black;
}
#right_col {
float:right; 
display: inline-block;
width:295px;
height: 100px;
border:1px solid orange;
}

Answer 2

最简单的修复将浮动#wrap。这意味着它将完全环绕其中的浮动元素并扩展以适应它们的高度。

您可能会发现这在您的布局中是不切实际的，在这种情况下，clearfix方法可以解决这个问题。有许多方法可以做到这一点已经显示出来了。

就个人而言，如果在语义上适用，我可能会使用带有clear的hr元素：都通过css类应用于它。

.clearer {
    clear:both; 
    visibility:hidden;
}

但是每个人都要自己。现在使用内容是安全的：在

之后

Answer 3

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
    <div style="clear:both;"></div>
</div>

的CSS

 #wrap {
           width:610px;

           border:1px solid red;
          padding:5px;
        }
        #left_col {
           float:left;
           width:300px;
           border:1px solid black;
        }
        #right_col {
           float:right;
           width:300px;
           border:1px solid orange;
        }

Answer 4

Floats将对象的初始高度包装到其内容中。如果内部div中没有内容，除了边框之外，您将看不到任何内容。

我还建议您查看.clearfix，因为#wrap内的浮动内容没有“修复花车”意味着#wrap不会依次提升它们的高度。< / p>

回答你的问题：

<强> CSS：

#wrap {
    border:1px solid red;
    width:604px
}
.col {
    float:left;
    width:300px;
    border:1px solid black;
}

/* The Amazing clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

<强> HTML

<div id="wrap" class="clearfix">
    <span class="col">
        Content!
    </span>
    <span class="col">
        Content!
    </span>
</div>

Answer 5

以下是演示，根据您的规格调整宽度和高度，

My Demo

HTML： --------

<div id="wrap">
    <div id="left_col">
        ...
    </div>
    <div id="right_col">
        ...
    </div>
    <div style="clear:both;"></div>
</div>

CSS:
------

#wrap {
    width:420px;
    border:2px solid red;
    padding:5px;
    margin: 10px;
}

#left_col { 
    float:left;
    width:200px;
    border:2px solid #FFA9C5;
    overflow: hidden;
    margin-right: 10px;
}

#right_col {
    float:left;
    width:200px;
    border:2px solid blue;
}

Answer 6

将overflow:auto添加到#wrap

#wrap {
               //width:600px;
               //margin:0 auto;
               border:1px solid red;
               //height:100px; overflow:auto
            }

<强> DEMO

周围有2个内盒，一个外盒

6 个答案: