CSS將一個元素居中並將另一個元素浮動到其右側？

我想在頁面上有一個居中的元素，並在右邊顯示了一些信息的另一個元素。我嘗試將元素向右移動，對我來說看起來很不錯，但我有一個很大的顯示。我調整了瀏覽器窗口的大小，並將中心元素向下推，這是我不想要的。我希望它像這個頁面上：http://imgur.com/XVuMBx6，其中圖片容器元素居中，右側的所有鏈接在右側，但是當您使顯示器變小時，沒有任何東西被推下，但是正確的元素只是被移出瀏覽器窗口。我的CSS是這樣的，#image是我想都集中在div和#info和.sharebutton是什麼，我想它的右邊：CSS將一個元素居中並將另一個元素浮動到其右側？

#image { 
    max-width: 900px; 
    display: block; 
    margin:auto; 
    position: relative; 
} 
#info, .sharebutton { 
    display: inline-block; 
    float: right; 
    position: relative; 
}

我試着設置一個明確的：既對圖像元素，但由於某種原因，這會將我的#info和.sharebutton元素扭曲到頁面的左側。謝謝。

編輯：我的HTML：

<div id="info"> 
    <ul> 
     <li>Uploaded: {{time}}</li> 
     <br> 
     <li>Views: {{view_count}}</li> 
    </ul> 
    <div class="sharebutton"> 
     <a href="#openModal"> 
      <button id="share">Click Me</button> 
     </a> 

     <div id="openModal" class="modalDialog"> 
      <div> 
       <a href="#close" title="Close" class="close">X</a> 
       <h2>Modal Box</h2> 

      </div> 
     </div> 
    </div> 


</div> 
<article> 
    <div id="image"> 
     <a href="{{source}}"> 
      <img src="{{source}}" /> 
     </a> 
    </div> 
</article>

來源

2014-02-25 Lucifer N.

你能顯示一些HTML標記嗎？ – misterManSam

一個基本的方法是這樣的：

article {margin: 0 200px;} 
#info {width: 190px;}

這令該中心區域的方式進行的側邊欄項目。

來源

2014-02-25 04:58:18

工作得很好，儘管最終我決定把它放在第一個元素下，而不是在旁邊看起來更好。不管怎麼說，還是要謝謝你！ –

對於#info, .sharebutton使用margin-right:0 insted的浮動

來源

2014-02-25 04:55:00 pasanbuddhika

讓我們做不同這一點了:)

有一個小提琴 - Fiddle link!

這裏有兩大塊：div#image和div#info。兩者都飄到左邊。 <body>以margin: 0 auto和max-width爲中心。

CSS

body { 
margin: 0 auto; 
/* Center body */ 
max-width: 900px; 
} 
#image { 
max-width: 900px; 
float: left; 
margin: 0 20px 0 0; 
} 
#info, .sharebutton { 
float: left; 
}

HTML - 略有不同... <article>第一。

<article> 
    <div id="image"> <a href="{{source}}"> 
      <img src="http://placehold.it/450x400"> 
     </a> 

    </div> 
</article> 
<div id="info"> 
    <ul> 
     <li>Uploaded: {{time}}</li> 
     <li>Views: {{view_count}}</li> 
    </ul> 
    <div class="sharebutton"> 
     <button id="share">Click Me</button> 
     <div id="openModal" class="modalDialog"> <a href="#close" title="Close" class="close">X</a> 

      <h2>Modal Box</h2> 

     </div> 
    </div> 
</div>

來源

2014-02-25 05:01:17 misterManSam

CSS將一個元素居中並將另一個元素浮動到其右側？

回答

相關問題