为什么在这个html显示器中不会将第一个div显示为其余的html浮点数旁边的列：right

为什么在这个html显示器中不会首先将div显示为旁边的一列，浮动：是吗？为什么在这个html显示器中不会将第一个div显示为其余的html浮点数旁边的列：right

<div style="padding-top:20px; float:left; width:50%; clear:both">Column 1</div> 
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;"> 
    <label for="title"> 
    <h3 style="text-align:left">Column 2</h3> 
    </label> 
</div> 
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;"> 
    <input type="text" maxlength="255" value=""> 
</div> 
<div class="" style="padding-bottom: 10px; padding-right:20px; width: 50%; float:right; clear:both;"> 
    <label for="body"> 
    <h3 style="text-align:left">Column 2</h3> 
    </label> 
</div> 
<div class="" style="padding-bottom: 10px; padding-right:20px; width:50%; float:right; clear:both;"> 
    <textarea maxlength="60000"></textarea> 
</div>

第1列线力塔2下，如下所示：

http://jsfiddle.net/coder/UQXvC/

来源

2012-01-16 coder

一个框的填充增加了其总宽度。

具有以下CSS甲盒施加：

.box { 
    width: 50px; 
    padding: 50px; 
}

将是150像素宽。

由于您将填充添加到列中，因此它们实际上比50％宽，并且不能再适合同一行。

来源

2012-01-16 01:20:53

甚至删除所有的填充后，将达到相同的结果：http://jsfiddle.net/coder/UQXvC/3/ – coder 2012-01-16 01:27:23

你列有明确的'：他们both'，它不允许其他元素出现在其行上。看到这里删除：http://jsfiddle.net/UQXvC/4/ – 2012-01-16 01:28:39

你应该将你的CSS与你的html分开。然后尝试像

#col1{ 
    float:left; 
    width:50%; 
{ 

#col2{ 
float:left; 
width:50% 
}

与宽度％的使用和向左或向右发挥作用的东西。使用这些div：

<div id="col1"></div> 
<div id="col2"></div>

来源

2012-01-16 01:27:32 jamesTheProgrammer

为什么在这个html显示器中不会将第一个div显示为其余的html浮点数旁边的列：right

回答

相关问题