如何製作內嵌內容的div？

http://i.imgur.com/37miZ.png這裏是截圖如何製作內嵌內容的div？

我想它的樣式，使得H1將坐左邊，輸入在中間，然後我想有右邊的鏈接。

我嘗試使用浮動，它只是毀了一切。

編輯

當我使用浮動：左或浮動：沒錯，我得到2周的div分開，但定位是可怕的。

一些HTML我有：

<div id="container"> 
      <div id="header"> 
       <div id="nytm"> 
        <h1>New York Tech Map</h1> 
       </div> 
       <div id="form"> 
        <form> 
         <input type="text" name="zip"> 
         <input type="submit" value="Search By Zip"> 
        </form> 
       </div> 
       <div id="navlinks"> 
       </div> 
      </div> 
</div>

這裏是CSS：

#container { 
    min-height: 100%; 
    position: relative; 
} 
#header { 
    background: #EDEDED; 
    height: 79px; 
    border-bottom: 1px solid #666; 
} 

#nytm{ 
    display: inline; 
} 

#form{ 
    margin-top: 24px; 
    display: inline; 
} 

#navlinks{ 
    display: inline; 
}

來源

2012-04-14 iCodeLikeImDrunk

請寫下代碼:) – emilan 2012-04-14 00:33:03

說英語的人，我不知道你在說什麼。「意志坐在左邊」和「在中間」意味着什麼？ – Jack 2012-04-14 00:38:45

@傑克大聲笑，我把標籤，所以我想他們消失了。 – iCodeLikeImDrunk 2012-04-14 00:41:49

的方式，我會做，這是第一次讓一個大格，然後把每個字段放入他們自己的div中，這會創建一個大小相等的div，裏面有等間距的div，那麼對它做css會更容易。

來源

2012-04-15 21:01:13 iCodeLikeImDrunk

像魅力一樣工作！謝謝！！ – iCodeLikeImDrunk 2012-04-15 21:01:43

-1

不太清楚你的意思，但請記住，每一個新的div是塊級元素，所以它會得到自己的一排，除非你另有說明。嘗試使用display：內聯你的float。

來源

2012-04-14 00:37:03 Andi

我確實使用過display：inline，但沒有任何反應。 – iCodeLikeImDrunk 2012-04-14 00:42:17

好吧，按照此步驟：

在找你的CSS文件，把這個clearfix風格類：

.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;} 
    .clearfix{display:inline-block;} 
    html[xmlns] .clearfix{display:block;} 
    * html .clearfix{height:1%;} 

    .fr{float:right;display:inline-block;} 
    .fl{float:left;display:inline-block;}

您將需要此類下一節。

現在讓我們來看看我們需要在HTML部分：

<div class="clearfix container"> 
     <div class="fl search-zone"> 
      <!-- YOUR SEARCH INPUT AND BUTTON HERE --> 
      <input type="text" /> <button>SEARCH</button> 
     </div> 
     <div class="fr links"> 
      <!-- YOUR LINKS HERE --> 
      <a href="">LINK 1</a> <a href="">LINK 2</a> <a href="">LINK 3</a> 
     </div> 
    </div>

的clearfix類將幫助它裏面你位置的任意浮動元素和它應該是一個跨瀏覽器的解決方案。 *強烈建議給予類search-zone和links a width以防止IE問題。

希望這是你在找什麼。

來源

2012-04-14 00:47:28 udidu

檢查它在這裏，爲什麼他們的定位是可怕的，而使用浮動。我調整CSS和看到輸出

http://jsfiddle.net/Bq9eq/

來源

2012-04-14 00:50:37 irfanmcsd

雅，我聽了埃米蘭後做了同樣的事情，哈哈，謝謝！ – iCodeLikeImDrunk 2012-04-14 00:54:18

我想你的意思是三個你想在那裏你的標題列。

這樣做的一種方法是創建三個獨立的div。

<div class="top-container"></div> 
<div class="top-container"></div> 
<div class="top-container"></div>

Clearfix容器和浮動孩子

#header .top-container{ 
    width:33%; 
    float:left; 
}

檢查這個搗鼓了全碼：http://jsfiddle.net/xZC3G/2/

來源

2012-04-14 00:55:05 miguelr

看起來不錯的廣告！謝謝！ – iCodeLikeImDrunk 2012-04-14 01:00:27

有更靈活的添加列的方式...您可以爲每個選擇不同的寬度，嵌套它們等。 – miguelr 2012-04-14 01:05:44

如何製作內嵌內容的div？

回答

相關問題