我正在尝试实现附加的desired.png上的内容(特别是使另一个框围绕2个内盒)。
我使用以下代码,但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>
答案 0 :(得分:3)
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;
}
答案 1 :(得分:1)
最简单的修复将浮动#wrap。这意味着它将完全环绕其中的浮动元素并扩展以适应它们的高度。
您可能会发现这在您的布局中是不切实际的,在这种情况下,clearfix方法可以解决这个问题。有许多方法可以做到这一点已经显示出来了。
就个人而言,如果在语义上适用,我可能会使用带有clear的hr元素:都通过css类应用于它。
.clearer {
clear:both;
visibility:hidden;
}
但是每个人都要自己。现在使用内容是安全的:在之后
答案 2 :(得分:0)
<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;
}
答案 3 :(得分:0)
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>
答案 4 :(得分:0)
以下是演示,根据您的规格调整宽度和高度,
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;
}
答案 5 :(得分:0)
将overflow:auto
添加到#wrap
#wrap {
//width:600px;
//margin:0 auto;
border:1px solid red;
//height:100px; overflow:auto
}
<强> DEMO 强>