HTML，列和'div'

Question

我正在使用HTML。我将页面分为两列：inner1和inner2。

• Inner1有一些数据，它没有第1列中的问题。
• Inner2有一个问题：因为Inner2被划分为两行[在同一列2]
• point2 - 它有可变数据[row -1]
• another_new - 它有固定数据[row-2]

HTML：

<div id="outer">
    <div id="inner1">
        <div id="point1">
        </div>
        <div id="response">
        </div>
    </div>
<div id="inner2">
    <div id="point2"> <!-- Variable data -->
    </div>
    <div id="another_new"> <!-- Fixed data -->
    </div>
    </div>
</div>

CSS：

#inner1{
    float : left;
    width :61%;
}
#inner2{
    float :right;
    width :39%;
}

如何显示页面？ Point2数据不应与another_new数据重叠。

Answer 1

非常欢迎您向左和向右浮动一列。您的问题很可能来自于您正在使用100％宽度的事实。如果这些div具有与它们相关的任何边距或边界，则可能导致它们比您预期的更宽，因此不能并排放置。即使没有边距/边框，某些浏览器也会出现问题。尝试将其中一列的宽度减少1％左右。

另一种可能性是明确的属性。确保两列都有clear：none;适用于他们。或者，你可以申请一个明确的：左;到左栏，一个明确：右;在右栏。

根据具体情况和正在使用的浏览器，在两列之后还可以有一个“跟进”div ：

<div class="col1"></div>
<div class="col2"></div>
<div class="clearBoth"></div>

div.clearBoth
{
   clear: both;
   height: 0px;
   overflow: hidden;
   margin: 0px;
   padding: 0px;
}

另外，您可能对CSS的clearFix技巧感兴趣：here

Answer 2

更改CSS，使两列都设置为float: left;。这将使您的列一个接一个地堆叠。

您可能还需要减少在那里给出的宽度。某些浏览器（如Internet Explorer）往往不喜欢宽度为100％（61％+ 39％），因此会导致最右边的浮动项目换行到下一行。

我只是猜测这是你的问题：o）

你也可以尝试添加CSS，

clear: both;

到div'other_new'。这将把它推到'point2'以下，无论Point2有多大。