在同一行上的父母同一行上的兩個div

因此，我做了一個搜索，似乎每個被問到這個完全相同的問題的人實際上已經成功了某人給出的答案 - 我嘗試了多種不同的方法方法，老實說，我即將崩潰。在同一行上的父母同一行上的兩個div

我試過向左浮動，向右浮動，內嵌塊等，並且沒有它似乎工作。我不知道自己做錯了什麼，但是這讓我感到非常緊張。

這裏是我試圖讓在同一行的HTML：

<div class="search-and-staff-app-button"> 
    <div class="search-position"> 
    <form method="get" id="sb_searchform" action="<?php bloginfo('home'); ?>/"> 
     <div class='search-box'> 
     <input name="s" id="s" class='search-input' placeholder='Search' type='text' /> 
     <img onclick="document.getElementById('sb_searchform').submit();" class='search-img' src='<?php bloginfo('template_url'); ?>/img/search.png'> 
     </div> 
    </form> 
    </div> 

    <div id="staffAppButtonPlaceholder" class="staff-app-position"></div> 

</div>

和CSS：

.search-and-staff-app-button { 
    width:360px; 
    margin:0px; 
    float:right; 
    display: inline-block; 
} 

.search-position { 
    float:left; 
} 

.staff-app-position { 
    float:left; 
}

我在做什麼錯？我試過Getting 2 divs on the same line，這也不起作用。

任何幫助將超級讚賞！

-Stu

來源

2015-02-24 Stuart Weir

請鏈接到的jsfiddle – GluePear 2015-02-24 00:25:28

請使用的jsfiddle，並解釋多一點，你要實現的目標是什麼。似乎你缺少#staffAppButtonPlaceholder div中的內容。 – 2015-02-24 00:30:51

哪個div？其中有4個 – 2015-02-24 00:34:23

要放置在同一行的search-position和staffAppButtonPlaceholder的div，第一個浮動的搜索位置的div：

.search-position { 
    float: left; 
}

然後添加一些內容到佔位符：

<div id="staffAppButtonPlaceholder" class="staff-app-position">Content</div>

最後，增加包含div的寬度以允許元素並排安裝：

.search-and-staff-app-button { 
    width:760px;

兩個div現在都將水平對齊。

http://jsfiddle.net/jzefu2j9/1/

來源

2015-02-24 00:33:31

雖然這似乎有效，但它們在我的頁面上相距甚遠（我無法張貼照片，因爲我沒有足夠的聲望）。爲了澄清，佔位符字面從字面上調用下拉按鈕，所以div只需要存在。問題的另一個部分是，它下推導航欄，導航標籤無法看到：S – 2015-02-24 04:22:08

想通了！謝謝！ – 2015-02-27 17:13:24

-1

add style =「position：relative」to your outer div。然後製作內部div的style =「position：absolute; left：0」。您將不得不手動設置每個div的左側值。缺點是你必須知道同一行上其他div的寬度。

來源

2015-02-24 00:32:33 cakefactory

這裏是一個小例子，也許它會幫助你。我使用了flexbox，這在我看來是一個很好的解決方案。

.search-and-staff-app-button{ 
    display: flex; 
    background:red; 
    align-items:center; 
} 
.search-and-staff-app-button > div{ 
    box-sizing:border-box; 
    display:block; 
    flex:1 50%; 
    align-self:center; 
    padding:1em; 
}

http://jsfiddle.net/pulamc/u9nLwacs/

來源

2015-02-24 01:21:49

在同一行上的父母同一行上的兩個div

回答

相關問題