如何在不影響標題內容的情況下將標題div浮動到標題div的右側？

我想知道如何得到以下結果：如何在不影響標題內容的情況下將標題div浮動到標題div的右側？

enter image description here

綠色是一個div容器寬700個像素。藍色是一個標題區域，它在寬度方向上填充綠色容器，其中一些標題文本位於中間。紅色需要漂浮在右側而不會影響標題中文本的流動。

我該如何做到這一點？我嘗試過在右側懸浮紅色框，但由於某些原因，它似乎將標題中的文本推向左側。

編輯 - 爲了記錄在案，我沒有張貼的例子，因爲HTML和CSS是不是真的我的專業領域，我掙扎着要回到一個例子，其中文本沒有對齊（已經嘗試了我讀過的六種不同的方法）。

<!DOCTYPE html> 
<head> 
    <title></title> 
    <style> 
    #Container { 
    width: 700px ; 
    margin-left: auto ; 
    margin-right: auto ; 
    } 

    #Title { 
    background-color: red; 
    text-align: center; 
    } 

    #GameGuidelines{ 
     align:right; 
    width: 200px; 
    background-color: grey; 
    } 
    </style> 

</head> 
<body> 

<div id="Container"> 

<div id="Title"> 
    <h1>This</h1> 
    <h2>Is</h2> 
    <h2>A</h2> 
    <h2>Long</h2> 
    <h2>Title Title Title Title</h2> 
</div> 

    <div id="GameGuidelines"> 
     <ul> 
      <li>Some</li> 
      <li>Info</li> 
      <li>Here</li> 
     </ul> 
    </div> 

<div id="Introduction"> 
    <p>Rest of the page continues here</p> 
</div> 

</div> 

</body> 
</html>

來源

2015-02-06 Jon Cage

告訴我們，你已經嘗試到目前爲止...... – 2015-02-06 20:08:27

我不希望這樣的問題（沒有努力）有這樣的聲譽.... – 2015-02-06 20:09:22

'.blue {position：相對}。紅色{位置：絕對;正確：0;頂部0;}'這樣的事情可能會工作 – 2015-02-06 20:10:08

移動元素成頭部，將其設置爲position:absolute，並給它一個margin-left:500px;

http://jsfiddle.net/3fgytw0u/2/ < - 那一個是正確的

來源

2015-02-06 21:19:32 SRing

也許這將幫助你：Link

#Container { 
width: 700px ; 
margin-left: auto ; 
margin-right: auto ; 
position: relative; 
} 

#Title { 
background-color: red; 
text-align: center; 
} 

#GameGuidelines{ 
    text-align:right; 
position: absolute; 
right: 0; 
top: 0; 
width: 200px; 
background-color: grey; 
}

來源

2015-02-06 20:10:56 fcastillo

這將遊戲的指引拉到頁面的角落，而不是綠色容器的角落。 – 2015-02-06 20:53:36

好吧，證明它[鏈接]（http://jsfiddle.net/2vh6p0gp/）我錯了...對不起（對我的英語感到抱歉） – fcastillo 2015-02-06 20:58:22

替代的方法來定位可以使用負margin-left等於紅色區域的寬度：

h2 { 
 
    padding: 10px; 
 
    background: #EEE; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 
h2 .right-block { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: coral; 
 
    float: right; 
 
    margin-left: -50px; 
 
}

<h2> 
 
    Some centered text 
 
    <div class="right-block"></div> 
 
</h2>

來源

2015-02-06 20:15:59 dfsq

這是你想要的。

<html> 

<head></head> 
<body> 
    <div style="border:green 1px solid;height:700px;" > 
     <div style="border:blue 1px solid;width:100%;height:200px;text-align:center"> 
      Some Title Text 
      <div style="float:right;border:1px red solid;width:100px;height:100px;margin-right:5px;position:relative;"> 
       Some text 
      </div> 
     </div> 
    </div> 
</body> 
</html>

紅色div將漂浮在藍色的右邊。

來源

2015-02-06 20:18:34 abbas

我試過，但它有我最初發現的問題 - 標題文本是偏移由紅色的div：http://jsfiddle.net/t2e2qz1h/ – 2015-02-06 21:10:22

這可能由內部DIV定位爲position: absolute並把它right: 0px簡單地完成，但因爲你需要阻止它不會一開始就被定位成與主顯示器，而不是，你把position: relative到外層div了。另外請確保在寫入時先將紅色的div放入，然後再放入具有紫色文本的div，或者您可以只添加top: 0px，這樣您就不會再在意了。

然後它應該工作！這裏是一個小提琴：http://jsfiddle.net/xg6rove7/

但要小心這樣一個事實，即紅色框中的任何文字都可以重疊在紫色的文本，因爲我試圖在小提琴中向你展示。你可能會使用的填充雙方等於框的寬度B更好，或者只是使用普通的老float: right

來源

2015-02-06 20:19:24 ShivamMax

在你的例子中，綠色div似乎是頁面的寬度（而不是一個較小的/設置的寬度）？我試過將它設置爲100寬度（例如），但似乎不影響輸出。 – 2015-02-06 20:51:44

我想這與問題 – ShivamMax 2015-02-06 20:57:51

無關。其實，它是相關的 - 我確實說這是一個固定的（700px）寬度容器在問題中。 – 2015-02-06 21:04:17

如何在不影響標題內容的情況下將標題div浮動到標題div的右側？

回答

相關問題