Q

爲什麼不在div之前開始div？

css
html

2013-01-07 28 views 1 likes

1

我正在修改WordPress主題的標題部分，我試圖在另一個div中嵌套幾個div。我對HTML/CSS並不是很有經驗，但我所觀察到的對我來說似乎很奇怪。爲什麼不在div之前開始div？

我的代碼如下所示：

<div class="extras"> 
    <div id="search"> 
     <form role="search" method="get" id="searchform" action="http://mentatescholars.com/" > 
      <input type="search" placeholder="Search" value="" name="s" id="s" /> 
      <input type="submit" id="searchsubmit" value="Search" /> 
     </form> 
    </div><!-- end #search --> 
    <div class="phone-number"> 
     <div class="phone-number-main">1-885-MENTATE</div> 
     <div class="phone-number-sub">1-885-636-8283</div> 
    </div> 
</div>

而在畫面我有Firefox的檢查選擇的phone-number DIV（選擇extras看起來是一樣的）。讓我感到奇怪的是，爲什麼它開始於extras div的頂部，而不是在search div之後。 search甚至有40px的設定高度。

My search box and the phone number

如果我選擇第三個格，那麼就說明以前的DIV開始後右邊的格。

Selecting the third div behaves like I would think
什麼也令我奇怪的是怎樣的，而phone-number-main div的頂部與extras平齊，文本完全向下移動，沒有我做任何事情。

我的問題是這樣的：我怎樣才能讓phone-number div在search div之後開始？

這裏的網站，如果你想看看它：http://mentatescholars.com/。

2013-01-07 mightimaus

+0

我們需要看到一些CSS。 – Kyle

A

回答

2

#search浮動並且.phone-number不是。如果您將clear:both添加到.phone-number<div />您將看到正確的佈局。

float從文檔流中移除元素。請檢查此鏈接以獲取更多信息：http://www.alistapart.com/articles/css-floats-101/

2013-01-07 08:29:26 lnrbob

+0

會發布這個，但我遲到了！ – gamehelp16

+1

@ gamehelp16如果你知道這個答案是正確的，你總是可以接受答案。 –

+0

男人我不知道我會怎麼做沒有這個網站...謝謝！ – mightimaus

0

通過降低高度使#search塊變小，可以說是30px。

2013-01-07 08:26:42 simoncereska

+0

我應該這樣做，我不應該...並添加底部邊距。 – mightimaus

1

那是因爲您已浮動元素。你的「搜索」div浮動，並沒有明確。在電話號碼元素的CSS使用clear:both，它會正常工作

如果你要的號碼是正確的後search使search 30像素的高度，擺脫提交按鈕的保證金底部。

2013-01-07 08:34:18

相關問題