容器并排放置 [英] divs side by side in container

问题描述

我试图并排创建两个div。我试着把 float：left 放在 .holder-left 和 float：right code>在。持有者权利中，但它们在父级持有者和内容div之外浮动。

如何解决这个问题？

CSS

  div.holder {
 margin：10px 10px 0 10px; 
 width：1002px; 
} 
 
 div.holder> div.holder-left {
 float：left; 
} 
 
 div.holder> div.holder-right {
 float：right; 
} 
  

HTML $ b

 < div class =持有人> 
< div class =holder-left> 
 aufgftf ftftfy 
< / div> 
< div class =holder-right> 
 afytf fttyfttyty 
< / div> 
< / div> 
  

解决方案

c> div.holder ，方法是添加 overfow 属性。这将允许外部div正确包装内部浮动div。我不记得为什么，但是这个解决方案有一些奇怪的地方，所以请看下面的clearfix解决方案。

  div.holder {
 margin：10px 10px 0 10px; 
 width：1002px; 
 overflow：hidden; 
 
  

---

虽然，实施clearfix解决方案。 （这里你不需要使用上面显示的 overflow 属性。）以下是我使用的clearfix解决方案的CSS：

  .group：after {
 visibility：hidden; 
 display：block; 
 content：; 
明确：两者; 
 height：0; 
} 
 
 * html .group {zoom：1; } / * IE6 * / 
 *：first-child + html .group {zoom：1; } / * IE7 * / 
  

然后如下所示更改浮动div的HTML。您只需将组类添加到包含浮动元素的div中即可。这将确保浮动的divs完全保留在外部div中。

 < div class =持有人组> 
< div class =holder-left> aufgftf ftftfy< / div> 
< div class =holder-right> afytf fttyfttyty< / div> 
< / div> 
  

这是clearfix解决方案的来源。

I'm trying to create two divs side by side. I tried to put float: left in .holder-left and float: right in .holder-right but they are floating outside the parent holder and content divs.

How can I solve it?

CSS

div.holder {
    margin: 10px 10px 0 10px;
    width: 1002px;
}

div.holder > div.holder-left {
    float: left;
}

div.holder > div.holder-right {
    float: right;
}

HTML

<div class="holder">
    <div class="holder-left">
        aufgftf ftftfy
    </div>
    <div class="holder-right">
        afytf fttyfttyty
    </div>
</div>

解决方案

A quick and dirty solution is modify div.holder by adding the overfow property. This will allow the outer div to properly wrap the inner, floated divs. I don't remember why, but there is some quirky-ness with this solution, so see the "clearfix" solution below.

div.holder {
    margin: 10px 10px 0 10px;
    width: 1002px;
    overflow: hidden;
}

---

Although, you should properly implement the "clearfix" solution. (Here you don't need to use the overflow property as shown above.) Here is the CSS for the clearfix solution I use:

.group:after{
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

* html .group{ zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */

Then change your HTML for the floated divs as shown below. All you need to do is add the group class to the div that contains the floated elements. This will ensure the floated divs stay completely inside the outer one.

<div class="holder group">
    <div class="holder-left">aufgftf ftftfy</div>
    <div class="holder-right">afytf fttyfttyty</div>
</div>

Here is the source for this clearfix solution.

这篇关于容器并排放置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！