並排放置3個div（1個固定，2個100％可用空間和3個自動）

我有一個佈局，其中有3列。並排放置3個div（1個固定，2個100％可用空間和3個自動）

<div id="wrapper"> 
    <div id="logo"></div> 
    <div id="search-input"></div> 
    <div id="user-name"></div> 
</div>

我怎樣才能在同一行放置這些3塊，而不JS，鈣和Flexbox的，如果我需要：

logo應固定
user-name應具備自動寬度
search-input應放置在logo和user-name塊之間的左側空閒空間中。它必須是流體容器。

來源

2015-11-06 Alexander Shlenchack

什麼順序？（從右到左） – Amit

左側的徽標塊和右側的用戶名塊。它們之間的搜索塊。 –

可能這是你想要的。你可以添加用戶名的內容，看看它是如何工作的。

.wraper{ 
 
    width: 100%; 
 
    border: 1px solid red; 
 
} 
 
#logo{ 
 
    float:left; 
 
    width:250px; 
 
    height: 50px; 
 
    border:1px solid #CCC; 
 
    display:block; 
 
    background-color:yellow; 
 
} 
 
#search-input{ 
 
    margin-left:260px; 
 
    min-height:50px; 
 
    display:block; 
 
    background-color:red; 
 
} 
 
#user-name{ 
 
    float:right; 
 
    display:block; 
 
    height:50px; 
 
    background-color:#FFF; 
 
} 
 
#search-input > .inner{ 
 
    height:50px; 
 
    background-color:red; 
 
    margin-right:20px; 
 
} 
 
#user-name > .inner{ 
 
    background-color:green; 
 
    min-width:150px; 
 
    height:50px; 
 
    margin-left:10px; 
 
}

<div id="wrapper"> 
 
    <div id="logo">Logo</div> 
 
    <div id="user-name"> 
 
     <div class="inner"> 
 
     user name 
 
     </div> 
 
    </div> 
 
    <div id="search-input"> 
 
     <div class="inner"> 
 
     search input 
 
     </div> 
 
    </div> 
 
</div>

來源

2015-11-06 10:31:55

非常好，謝謝。 –

<div id="wrapper"> 
 
     <div id="logo"></div> 
 
     <div id="search-input"></div> 
 
     <div id="user-name"></div> 
 
    </div> 
 
<style> 
 
#logo{float:left;padding:2px} 
 
#search-input{width:50%;float:left;padding:2px} 
 
#user-name{width:auto;float:left;padding:2px} 
 
</style>

來源

2015-11-06 09:09:58

我需要將塊放在一行http://jsfiddle.net/qteomq6v/ –

現在檢查亞歷山大 –

搜索輸入應放置在徽標和用戶名塊之間的空閒空間。它必須是一個流體塊 –

使用Flexbox的：

#wrapper { 
 
    display: flex; 
 
/* flex-direction: row; <-- by default */ 
 
} 
 
#logo { 
 
    flex: 0 0 200px; 
 
    background-color: lightgreen; 
 
} 
 
#user-name { 
 
    flex: none; 
 
    background-color: lightblue; 
 
} 
 
#search-input { 
 
    flex: 1 0 auto; 
 
    background-color: lightgrey; 
 
}

<div id="wrapper"> 
 
    <div id="logo">logo</div> 
 
    <div id="search-input">input</div> 
 
    <div id="user-name">user name</div> 
 
</div>

來源

2015-11-06 09:15:35 Amit

flexbox是不是最好的方式。不管怎麼說，還是要謝謝你。 –

@AlexanderShlenchack - 爲什麼不呢？如果你知道你的這個限制，爲什麼不在你的問題中提到這個？人們（我...）正在從業餘時間中幫助你，你認爲告訴他們（我......）不是他們（我）的時間是好心人嗎？ – Amit

對不起，浪費你的時間。我已經提出了你的答案，但對我來說這不是一個答案。 –

#wrapper{ 
    display:block; 
} 
#logo{ 
    display:inline-block; 
    width:30%; 
    float:left; 
} 
#search-input{ 
    width:50%; 
    display:inline-block; 
    float:left; 
} 
#user-name{ 
    width:auto; 
    display:inline-block; 
    float:left; 
}

這將讓他們在同一行。

來源

2015-11-06 09:37:04

並排放置3個div（1個固定，2個100％可用空間和3個自動）

回答

相關問題