CSS容器DIv高度。浮动DIV问题

问题描述

你可以强制容器DIV高度来容纳两个浮动的div儿童吗？有没有一个花哨的技巧，我可以使用这样做？我试图在父div中创建两个相等大小的div。我希望他们并排显示，在它们之间有一点空格。 Child2倾向于弹出并且低于Child1。 Note Child2包含一个表。应该是浮动的吗？

Can you force a container DIV height to accomodate two floated div children? Is there a fancy trick I can use to do that? I am trying to make two equally sized divs inside the parent div. I would like them to appear side by side with a little whitespace between them. Child2 tends to pop out and go below Child1. Note Child2 contains a table. Should I be floating?

HTML：

<div id="parent">
  <div id="child1"></div>
  <div id="child2">
    <table><tr><td>content</td></tr></table>
</div>
</div>

CSS：

div#parent
{
    background-color: #C6E4E0;
    border: solid 3px #017E6F;
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    width:99%;
}

div#parent div
{
    width:49%;
    float:right;
    padding:3px;
}

div#parent div:first-child
{
    float:left;
}

推荐答案

他们的问题是他的两个浮动的div不会并排出现。

This is not a clearfix issue guys, his problem is that his two floated divs are not appearing side by side.

首先，你不需要设置父div的宽度，divs是块元素，这意味着它们会自动调整其宽度以占用其父元素的全部宽度（在这种情况下，可能是父元素的父元素是父元素）。

First of all, you do not need to set the width of the parent div, divs are block elements which means they automatically adjust their width to take up the full width of their parent (in this case, presumably the parent of div#parent is the body).

因为你显式地设置宽度并给它填充，它可以潜在地延伸超过身体。这并不重要，但如果你把这个知识应用到孩子浮动的div，你可以看到为什么正确的人可能碰到底部。

Because you are setting the width explicitly AND giving it padding, it can potentially extend BEYOND the body. That doesn't really matter, but if you apply this same knowledge to the child floated divs and you can see why the right one might get bumped down to the bottom.

首先，如果您明确将div的宽度设置为百分比，则不需要添加填充。因为你处理的是百分比宽度，所以最好在div的内容中添加填充，而不是在div的内容中填充，因为填充的宽度是ADDED。因此，如果您为100像素父元素中的宽度为49％的div添加了10像素的边距，则宽度为49像素+ 10像素+ 10像素（2边），总计算宽度为69像素。

First, if you are explicitly setting the widths of the divs to a percentage, you do not need to add padding. Because you are dealing with percentage widths, it is better to add padding to the content of the divs rather than the divs themselves, because padding is ADDED to the width. Therefore, if you added 10px padding to a div that had a 49% width in a 100px parent, it would have a width of 49px + 10px + 10px (2 sides) for a total calculated width of 69px.

因为你没有发布你的标记和内容或你正在测试的浏览器，我不能说明为什么div被撞倒。有两种可能的可能性。

Since you didn't post your markup and content or which browser you are testing in, I can't say exactly why the div is being bumped down. There are two likely possibilities.

1. 您正在使用IE，它允许表扩展超出其父div，这将导致破坏。尝试将表格宽度显式设置为其父元素的百分比或类似内容。


2. 49％width + padding =大于[parent-width] - [left-div-width] 。这将导致它被碰撞，因为左div和右div对于父宽度太宽。

这篇关于CSS容器DIv高度。浮动DIV问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！