在一條線上顯示3個DIV

-1

我正在嘗試像水平線一樣顯示3個div。在一條線上顯示3個DIV

像這樣：

enter image description here

這是我的HTML：

  <div class="notactive"></div> 
     <div class="notactive"></div> 
     <div class="notactive"></div>

這是我的CSS迄今：

.notactive { 
    height: 10px; 
    width: 90px; 
    background: #fff; 
    position: absolute; 
    //left: 200px; 
    bottom: 30px; 
    cursor: pointer; 
    float: left; 
    display: block-inline; 
}

UPDATE：

.notactive { 
    height: 10px; 
    width: 90px; 
    background: #fff; 
    position: absolute; 
    //left: 200px; 
    bottom: 30px; 
    cursor: pointer; 
    float: left; 
    display: inline-block; 
}

但我不能得到它的工作。希望有人會幫助我。

謝謝。

來源

2013-03-10 TNK

請添加的jsfiddle – 2013-03-10 13:40:08

沒有必要，如果你使用inline-block的浮動他們！（並且你不能使用//評論一行，它是/ * ...代碼... */ – evuez 2013-03-10 13:44:21

的幾個問題：

它是inline-block不是block-inline
position:absolute，left，bottom是不必要的
您使用白色作爲背景，所以你可能就沒有能夠看到它

jsFiddle

.notactive { 
    height: 10px; 
    width: 90px; 
    background: #000; 
    cursor: pointer; 
    display: inline-block; 
}

有使用float:left;另一種方法但inline-block已足夠滿足您的需求。

jsFiddle

HTML

<div class="notactive"></div> 
<div class="notactive"></div> 
<div class="notactive"></div> 
<div class="clear></div>

CSS

.notactive { 
    height: 10px; 
    width: 90px; 
    background: #000; 
    cursor: pointer; 
    float:left; 
    margin:2px; 
}

編輯：Here is a fix對你把意見撥弄你的問題。我用固定的height將圖像和名稱包裝在div中。這推動了他們。

來源

2013-03-10 13:41:19

但是我需要使用'position'和我的真實代碼 – TNK 2013-03-10 13:44:05

它絕對不會在3個兄弟因爲他們都將在同一個地方的位置，你爲什麼說你需要使用它？ – 2013-03-10 13:44:56

這是小提琴什麼試圖做http://jsfiddle.net/kRZ5r/3/ – TNK 2013-03-10 13:46:34

有沒有在你的代碼中的錯誤 - 它應該是

display: inline-block;

來源

2013-03-10 13:39:23 John

我不會用絕對位置這一點，試試這個：

.notactive { 
    height: 10px; 
    width: 90px; 
    background: #fff; 
    cursor: pointer; 
    float: left; 
}

來源

2013-03-10 13:40:51 Adaz

是顯示：內聯塊是您的最佳選擇。刪除絕對定位，除非有特定原因。

來源

2013-03-10 13:42:55

.notactive:nth-child(1){left:0px;} 
.notactive:nth-child(2){left:100px;} 
.notactive:nth-child(3){left:200px;}

來源

2013-03-10 13:48:20

<html> 
<head> 
<style> 
.left 
{ 
width:33%; 
background-color:cyan; 
float:left; 
height:200px; 
} 
.centre 
{ 
background-color:red; 
width:33%; 
float:left; 
height:200px; 
} 
.right 
{ 
width:33%; 
background-color:cyan; 
float:left; 
height:200px; 
} 

</style> 
<body> 
<div class="left"></div> 
<div class="centre"></div> 
<div class="right"></div> 
</body> 
</html> 
try this coding that I have Created for you

來源

2013-03-10 14:11:00

<html> 
<head> 
<style> 
.notactive1 
{ 
height: 10px; 
width: 90px; 
background: Red; 
position: absolute; 
top:10px; 
left:100px; 
} 
.notactive2 
{ 
height: 10px; 
width: 90px; 
background: Red; 
position: absolute; 
top:10px; 
left:200px; 
cursor: pointer; 
} 
.notactive3 
{ 
height: 10px; 
width: 90px; 
background: Red; 
position: absolute; 
top:10px; 
left:300px; 
cursor: pointer; 
} 
</style> 
<body> 
<div class="notactive1"></div> 
<div class="notactive2"></div> 
<div class="notactive3"></div> 
</body> 
</html> 
Another Answer Hope You Statisfied by this ans......

來源

2013-03-10 14:21:29

<div> 
 
    <div style="display: inline-block;width:100px;height:100px;background-color:red;">DIV 1</div> 
 
    <div style="display: inline-block;width:100px;height:100px;background-color:green;">DIV 2</div> 
 
    <div style="display: inline-block;width:100px;height:100px;background-color:blue;">DIV 3</div> 
 
</div>

來源

2017-09-28 08:24:39 arun

請延長巡迴答案，並解釋此代碼的完成情況。 – Suncatcher 2017-09-28 08:45:01

在一條線上顯示3個DIV

回答

相關問題