Html 容器div的CSS和下一行

我更多的是一个程序员而不是一个设计师，我试图接受

而不是使用表，但我被卡住了

这就是我要做的。我正在设置一个调查页面。我希望每个问题的文本都放在蓝色分区的顶部，如果太长，请将其换行。我希望所有的红色div都排列在container div的右上角

我从这里开始，只要帧宽度超过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; 
}

---

这里的测试很少，但我认为您应该在.greencontainer上使用“clear:both；”而不是“float:left”。同时从.bluecontainer中删除“clear:both”

---

查看更多信息，请访问：

不要在bluecontainer上使用clear:both，因为它将清除两侧（左侧和右侧）的任何元素。您应该使红色容器向右浮动。

除了红色容器外，不要使任何东西浮动，并将其向右浮动。确保红色容器的HTML放在蓝色容器的HTML之前。在蓝色容器上保持静态宽度，在绿色容器上保持clear:All。

在蓝色div上有“clear:All”。我认为这就是问题的原因

---

看看哪个有一些方便的演示。

下面是我要做的：

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

---

PS Padding值应该总是有单位，除非它们是零。

我认为根本不需要浮动绿色容器，因为它是包含div的。另外，只有在同一个绿色容器中放置多个蓝色/红色div时，才需要“clear:tware”语句

试一试

绿色集装箱{ 宽度：100%； 间距：10； } .bluecontainer{ 浮动：左； 宽度：400px； 填充：210； 字体大小：11px； 字体系列：无衬线； 文本对齐：左对齐； } .redcontainer{ 浮动：对； 宽度：20px； 填充：2 0 2 0； 字体大小：11px； 字体系列：无衬线； 文本对齐：居中； }

---

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

谢谢，我试图使其比原来更复杂。你的解决方案是有道理的。谢谢你对CSS语法的提醒！图像链接不起作用，因此问题不清楚。

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

.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; }