容器div的CSS并下降到下一行

Question

我更像是程序员而不是设计师，而我正试图拥抱<div>而不是使用表格，但却陷入困境。

这就是我想要做的。我正在建立一个调查页面。我希望每个问题的文本都位于蓝色div的顶部，并且如果它太长则包裹。我希望所有的红色div都排在容器div的右上角。

布局http://img528.imageshack.us/img528/4330/divsforsurveyop2。 JPG

这是我开始使用的，只要帧宽超过420像素，它就可以正常工作。然后红色div跳到下一行。我想我可能错了，或许我应该把事情向右移动？

.greencontainer{
    width:100%;
    spacing : 10 10 10 10 ;
    float: left; 
}

.redcontainer{ 
    float: left; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: center; 
}

.bluecontainer{ 
    clear: both;
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: left; 
}

Answer 1

以下是我要做的事情：

<div class="greencontainer">
  <div class="redcontainer">
    <input type="checkbox" />
  </div>
  <div class="bluecontainer">
    <label>Text about this checkbox...</label>
  </div>
</div>

用css：

.greencontainer{
   float:left;
   clear:left;
   width:100%;
 }
 .redcontainer{
   float:right;
   width:20px;
 }
 .bluecontainer{
   margin-right:20px;
 }

PS填充值应始终具有单位，除非它们为零。

Answer 2

除了红色容器外，不要漂浮任何东西，并将其漂浮到右侧。确保红色容器的HTML放在蓝色容器的HTML之前。将静态宽度保持在蓝色容器上，并保持透明：两者都放在绿色容器上。

Answer 3

不要在你的bluecontainer上使用clear：因为它会清除两侧（左侧和右侧）的任何元素。你应该让redcontainer浮动到右边。

Answer 4

你有<！> quot; clear：两个<！> quot;在蓝色div。这就是我认为导致问题的原因。

请参阅 http://www.barelyfitz.com/screencast/ html-training / css / positioning / 有一些方便的演示。

Answer 5

这里的测试很少，但我认为你想要<！>“; clear：both; <！> quot; on .greencontainer而不是<！> quot; float：left <！> quot;。同时删除<！> quot; clear：both <！> quot;来自.bluecontainer

查看更多信息： http://www.quirksmode.org/css/clearing。 HTML

Answer 6

我认为你根本不需要浮动绿色容器，因为它是包含div。另外，一个<！>“清除：两个<！>”;如果将多个蓝色/红色div放在同一个绿色容器中，则只需要声明。

尝试

.greencontainer{
    width:100%;
spacing : 10 10 10 10 ;

}

.bluecontainer{ 
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
font-family: sans-serif; 
    text-align: left; 
}
.redcontainer{ 
    float: right; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
font-family: sans-serif; 
    text-align: center; 
}

您可能还需要向蓝色容器添加右边距或向左边距添加红色容器，以获得它们之间的一致间距，而不是使用与div内部间距不相关的填充