你如何把三個div並排放在一起然後居中？

Question

我對CSS和HTML還很陌生，所以我需要一點幫助。我爲我的tumblr博客製作了一個主題，並且我有三個主要的div，我想在同一行以及居中排列。

它應該是這個樣子（用Photoshop編輯）：

現在它看起來是這樣的：

我到處找的答案，我嘗試了許多東西。幾乎每個教程或一條建議都包含float：left;的東西，但沒有奏效。我已有的代碼有問題嗎？我需要更改或添加什麼？我希望圖片位於中心位置，描述位於左側，鏈接位於右側。

這裏是代碼：

#top { 
margin-left:-35px; 
margin-top:30px; 
} 

#topimage { 
width:64px; 
height:64px; 
border-radius:3px; 
border:6px solid #fff; 
background-image:url('{PortraitURL-64}'); 
} 

#topdeschold { 
width:150px; 
background-color:#fff; 
padding:25px; 
margin-top:5px; 
} 

#topdesc { 
text-align:justify; 
font-size:7px; 
text-transform:uppercase; 
} 

#topdesctitle { 
color:#df8d88; 
font-size:9px; 
text-transform:lowercase; 
font-style:italic; 
text-align:right; 
} 

#toplinkshold { 
width:150px; 
background-color:#fff; 
padding:25px; 
margin-top:5px; 
} 

#toplinks { 
display:block; 
padding:6px; 
background-color:#f8f8f8; 
font-size:7px; 
text-transform:uppercase; 
} 


<div id="top"> 

<div id="topimage"></div> 

<div id="topdeschold"> 
<div id="topdesctitle">blah blah balh</div> 
<div id="topdesc"> Blah! Blah blah balh? lbalhlalg? dlff 
df gb fgbgn fgnghnghn gnhgn fhng! DGSsdf gf</div> 
</div> 

<div id="toplinkshold"> 
<div id="toplinks"> 
    <a href="/">home</a> 
</div> 

<div id="toplinks"> 
    <a href="/">ask</a> 
</div> 

<div id="toplinks"> 
    <a href="/">submit</a> 
</div> 

<div id="toplinks"> 
    <a href="/">more</a> 
</div> 
</div> 

</div> 

您的幫助表示讚賞！

Answer 1

如果古老的瀏覽器支持不是問題，請使用css3 Flex。應用下面的CSS父元素

#top { 
    display:flex; 
    justify-content:space-around; 
} 

，或者你可以讓孩子的div元素inline-block使用text-align居中，並使用「margin`調整空間，像

#top { 
    text-align:center; 
} 
#top > div { 
    display:inline-block; 
    margin: 1em; /* or your desired margin */ 
} 

Answer 2

我想你可以將三個div分組到另一個div中，將其顯示CSS屬性設置爲阻止，然後居中這最後一個。您還應該在三個原始div上將display屬性設置爲inline-block。

祝你好運！

Answer 3

另一種方法是添加「float：left;」每個div樣式都充當您想要並排查看的數據的容器。例如;

#topimage { 
width:64px; 
height:64px; 
border-radius:3px; 
border:6px solid #fff; 
background-image:url('{PortraitURL-64}'); 
float:left; 
} 
#topdeschold { 
width:150px; 
background-color:#fff; 
padding:25px; 
margin-top:5px; 
float:left; 
} 
#toplinkshold { 
width:150px; 
background-color:#fff; 
padding:25px; 
margin-top:5px; 
float:left; 
} 

所以，你的CSS是：

#topimage { 
width:64px; 
height:64px; 
border-radius:3px; 
border:6px solid #fff; 
background-image:url('{PortraitURL-64}'); 
float:left; 
} 
#topdeschold { 
width:150px; 
background-color:#fff; 
padding:25px; 
margin-top:5px; 
float:left; 
} 
#toplinkshold { 
width:150px; 
background-color:#fff; 
padding:25px; 
margin-top:5px; 
float:left; 
} 
#top { 
margin-left:-35px; 
margin-top:30px; 
} 
#topdesc { 
text-align:justify; 
font-size:7px; 
text-transform:uppercase; 
} 
#topdesctitle { 
color:#df8d88; 
font-size:9px; 
text-transform:lowercase; 
font-style:italic; 
text-align:right; 
} 
#toplinks { 
display:block; 
padding:6px; 
background-color:#f8f8f8; 
font-size:7px; 
text-transform:uppercase; 
} 

行動做了一個的jsfiddle本：http://jsfiddle.net/vjZqC/

Answer 4

這裏是你必須添加到您的CSS。我試過它和它的作品：

 


    #top { 
    display:block; 
    text-align:center; 
    } 

    #topimage { 
    display:inline-block; 
    } 

    #topdeschold { 
    display:inline-block; 
    } 

    #toplinkshold { 
    display:inline-block; 
    }