0

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

在此处输入图像描述

我使用以下代码，但 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>

4

6 回答 6

3

Css 没有 // 注释格式。您只能使用 /* */。这将是一个错误。您还必须设置包含容器的高度。因为浮动元素不适用于外部容器的高度。并且不要错过内容器的高度。我修改后的 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;
}
于 2012-10-23T11:09:54.503 回答
1

最简单的解决方法是浮动#wrap。这意味着它将完全包裹其中的浮动元素并扩展以适应它们的高度。

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

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

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

但各有各的。现在使用内容是安全的：之后

于 2012-10-23T13:11:26.503 回答
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;
        }​
于 2012-10-23T11:15:09.197 回答
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;
}​
于 2012-10-23T11:27:34.453 回答
0

添加overflow:auto到#wrap

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

演示

于 2012-10-23T11:27:57.583 回答
0

浮点数将对象的初始高度包装到它的内容。如果内部 div 中没有内容，则除了边框之外什么都看不到。

我还建议您查看.clearfix，因为在#wrap没有“固定浮动”的情况下浮动内容意味着#wrap不会依次升高它们的高度。

要回答您的问题：

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>
于 2012-10-23T11:16:03.003 回答