如何保持元素

請看看這個表格，我試圖設計沒有太多的運氣。讓我說，我來自一個表世界，我真的想學習這個CSS的東西。因爲我已經使用了這麼長時間的桌子，我想我期待着同樣的結果。例如，如果我寫了一行數據然後開始一個新行，最下面一行將永遠不會從它所在的位置移動;也就是說，與CSS不同，行的內容保持不變。如何保持元素

現在，在這種情況下，我期待着同樣的行爲，但我得到的是這些盒子跳起來，每一個方式。我所要做的就是將兩個輸入框並排放置，另一個放在下面。發生的是最後一行跳轉。爲了推下一個盒子，我必須在右邊的盒子上保留一個hight屬性。

我包括所有的CSS，如果你在瀏覽器中查看它，你會希望看到這些框，因爲我打算他們是。

#passage .input-right { 
    border:1px solid #888; 
    height:22px; <----------------------If you change this to something lower, the bottom box jumps up. 
    width:99%; 
    margin:0; 
    padding:0; 
}

這裏是所有的代碼。

<style> 
#passage { 
    width:90%; 
    height:350px; 
    border:0px solid #000; 
    color:black; 
    margin:auto; 
} 
#passage p { 
    font-size:11px; 
} 
#passage span.left { 
    float:left; 
    width:49%; 
    border:0px solid #000; 
} 
#passage span.right { 
    float:right; 
    width:49%; 
    border:0px solid #000; 
} 
#passage .select-left { 
    border:1px solid #888; 
    height:21px; 
    width:99%; 
    margin:0; 
    padding:0; 
} 
#passage .input-right { 
    border:1px solid #888; 
    height:22px; 
    width:99%; 
    margin:0; 
    padding:0; 
} 
#passage div#submit { 
    float:left; 
    width:100%; 
    border:0px solid #000; 
    margin-top:20px; 
} 
</style> 

<div id="passage"> 
    <span class="left"> 
    Book<br /> 
    <select class="select-left" name="book"> 
     <option value="">Select..</option> 
    </select> 
    </span> 

    <span class="right"> 
    Chapter<br /> 
    <input type="text" class="input-right" name="chapter-verse" /> 
    </span> 

    <span class="left"> 
    Translation<br /> 
    <select class="select-left" name="translation"> 
     <option value="">Select...</option> 
    </select> 
    </span> 

    <div id="submit"> 
    <form method="post" action=""> 
     <div> 
     <input type="submit" value="submit" name="search" /> 
     </div> 
    </form> 
    </div> 
</div>

來源

2009-11-01 Jim

您需要了解的是塊和內聯元素之間的區別，並且這兩者都來自相當面向文本的理念。塊元素（例如<div>或<p>）將彼此向下推，即它們不會出現在彼此相鄰的相同「行」上，而是更像段落。內聯元素，如<span>和<input>，另一方面表現得像文本。只要有空間，它們在同一條直線上排成一行，然後向下移動到下一行，然後向左移動，直到它們碰到障礙物並再次啓動程序。

對內聯元素應用高度與將其應用於塊級元素的結果不同。它可能不會立即影響內聯元素，但可能會將其推到附近的其他塊級元素上。

如果您將float添加到混合中，它會變得有點棘手，因爲浮動元素的行爲有點像塊和內聯元素。塊級元素將很大程度上忽略浮動元素，即塊級元素內的浮動元素將不會對所述塊級元素的總高度做出貢獻。 OTOH，內聯元素將通過浮動元素與浮動元素「交互」（這種行爲是爲嵌入在文本段落中的圖像設計的）。浮動元素在很大程度上表現爲內聯元素。

-- div (block) ----------------------------------- 
| inline inline inline -- img (floated right) -- | 
| inline inline inline |      | | 
| inline inline inline |      | | 
| inline inline inline ------------------------- | 
| inline inline inline inline inline inline  | 
| inline inline inline inline inline    | 
-------------------------------------------------- 

-- div (block) ----------------------------------- 
| inline inline inline -- img (floated right) -- | 
| inline inline inline |      | | 
-----------------------|      |-- 
         ------------------------- 
      (the float is not contributing to the div's height)

有未來兩個輸入出現相互下面第三個最簡單的方法可能是這樣的：

-- div (block) --------------------------- 
| input (inline)  input (inline) | 
------------------------------------------ 
-- div (block) --------------------------- 
| input (inline)      | 
------------------------------------------

您可以代碼的HTML這樣的，或者操縱你現有的HTML通過CSS表現得像這樣（display: block/display: inline）。歡迎來到CSS的世界。原則上這並不難，你只需要擺脫桌面思維。 :)

來源

2009-11-01 06:12:18 deceze

欺騙，謝謝你一個夢幻般的答案！過去我曾聽說過內聯和塊狀元素，並試圖找到某種明確的列表，但找不到一個。我想我會接受你的建議並創建3個div，並使用跨度來處理它們內部的輸入。這應該工作，我希望。 :) – Jim 2009-11-01 06:18:30

deceze，我試圖做你已經建議，並給予第一行div周圍的邊框，但看不到盒子。如果我在那裏放置一個高度屬性，那麼我可以看到盒子。這對我來說很奇怪，因爲再次，對於表，如果行中有**任何**，您將能夠看到它。這個div是不是開放到它的內容的大小？ – Jim 2009-11-01 06:29:02

@Jim：它應該，除非你只有浮動元素（如上所述，花車很大程度上被塊所忽略）。我建議你先把所有的CSS都扔出去，然後清理一下。 – deceze 2009-11-01 06:34:14

我在長時間內與類似的問題交戰過，特別是在主流瀏覽器中保持相同。最後，我轉向使用YUI Grids來簡化這一切。還有其他幾種CSS網格解決方案可用於簡化它，但我沒有親自使用過任何其他CSS。

來源

2009-11-01 05:38:50 Jason

謝謝傑森。我現在就去看看。 :) – Jim 2009-11-01 05:39:43

如何保持元素

回答

相關問題