CSS容器div和下一行

我更像是一個程序員而不是設計師，我試圖接受<div> s，而不是使用表格，但我陷入困境。CSS容器div和下一行

這是我正在嘗試做的。我正在建立一個調查頁面。我希望每個問題的文本都坐在藍色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; 
}

來源

2008-11-05 jeph perro

圖像鏈接不起作用，所以問題還不清楚。 – 2016-09-14 13:48:50

這裏是我會做什麼：

<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填充值應該始終有單位，除非是零。

來源

2008-11-05 17:42:39 philnash

謝謝，我試圖讓它比它更復雜。你的解決方案很有意義感謝您提供關於CSS語法的提醒！ – 2008-11-05 18:37:43

很少的測試在這裏，但我認爲你會想「明確：既;」 on .greencontainer而不是「float：left」。從.bluecontainer

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

來源

2008-11-05 17:35:03

不使用明確的：無論在你的bluecontainer，因爲它會清除兩側（左，右）的任何元素：另外「兩清」刪除。你應該讓redcontainer漂浮在右邊。

來源

2008-11-05 17:37:28 Arief

啊，對。忘記在我的答案中包含這一點。很好的接收。 – 2008-11-05 17:52:13

請勿漂浮除紅色容器外的任何東西，並將其漂浮到右側。確保紅色容器的HTML位於藍色容器的HTML之前。保持藍色容器上的靜態寬度，並保持清晰：均在綠色容器上。

來源

2008-11-05 17:38:01

你有「明確：都」在藍色的div。這是我認爲會導致問題的原因。

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

來源

2008-11-05 17:40:40

我不認爲你需要漂浮綠色的容器，因爲它是包含div。此外，只有在同一個綠色容器中放置多個藍色/紅色div時，纔會需要「clear：both」語句。

嘗試

 
.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不在它周圍

來源

2008-11-05 18:02:16 Katy

CSS容器div和下一行

回答

相關問題