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

【问题标题】：CSS for container divs and falling to the next line容器 div 的 CSS 并下降到下一行
【发布时间】：2010-09-20 22:14:15
【问题描述】：

我更像是一名程序员而不是设计师，我试图接受<div>s 而不是使用表格，但我遇到了困难。

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

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

【问题讨论】：

图片链接失效，所以问题不清楚。

标签： html css css-float css-tables

【解决方案1】：

这里的测试很少，但我认为你会想要“clear: both;”在 .greencontainer 上，而不是“float：left”。同时从 .bluecontainer 中删除“clear: both”

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我会这样做：

<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 填充值应始终有单位，除非它们为零。

【讨论】：

谢谢，我试着让它变得更复杂。你的解决方案很有意义。也感谢您对 CSS 语法的提醒！

【解决方案6】：

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

试试

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

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

【讨论】：