如何將文本放置在HTML/CSS中左側的東西？

現在我能夠在屏幕左側獲得一組文本，但是它位於圖像下方。我怎樣才能得到它，以便它在該圖像的左側？另外，當我嘗試在CSS中對齊文本時，它不會執行任何操作。我已經定位到目前爲止的方式是HTML。如何將文本放置在HTML/CSS中左側的東西？

以下是我有：

<style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #pic{ margin-left: auto; margin-right: auto; 
      width: 800px; height: 600px } 

    .allQuestions { 
     text-align: left; /* This doesnt do anything */ 
    } 
    </style>

 <div id="pic" ></div> 

    <div id = "allQuestions" style="float: left;"> 

     <div> <a href="#" onclick="toggle_visibility('q1');"> 
      <h1 id="q1" data-original="Click A" data-after="You've clicked A" 
      data-toggled="0">Click A</h1></div> 

     <div> <a href="#" onclick="toggle_visibility('q2');"> 
      <h1 id="q2" data-original="Click B" data-after="You've clicked B" 
      data-toggled="0">Click B</h1></div> 

     <div> <a href="#" onclick="toggle_visibility('q3');"> 
      <h1 id="q3" data-original="Click C" data-after="You've clicked C" 
      data-toggled="0">Click C</h1></div> 

     <div> <a href="#" onclick="toggle_visibility('q4');"> 
      <h1 id="q4" data-original="Click D" data-after="You've clicked D" 
      data-toggled="0">Click D</h1></div> 

     <div> <a href="#" onclick="toggle_visibility('q5');"> 
      <h1 id="q5" data-original="Click E" data-after="You've clicked E" 
      data-toggled="0">Click E</h1></div>  

    </div>

這裏是什麼，我有一個截圖：

等待，爲什麼截圖沒有顯示...？

來源

2015-11-15 bob dylan

請把你的代碼在疑問句包括這樣它才能真正複製問題。用真實的圖片等 – Roope

你想讓你的文字在你的圖片上嗎？ –

'text-align：left' – mohsen

您可以使用絕對定位將文本浮動到圖像的左側。

瞭解位置的CSS屬性在這裏： https://css-tricks.com/almanac/properties/p/position/

希望這有助於！

HTML

<div class="container"> 
    <span class="text-float">Some Cube</span> 
    <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png"> 
</div>

CSS

.container { 
    border:1px solid #000; 
    width: 300px; 
    margin: auto; 
    position:relative; 
} 
.container img{ 
    width:100%; 
    height: auto; 
} 
.container span{ 
    position: absolute; 
    top: 50%; 
    left:-90px; 
    border:2px solid #000; 
}

Working Fiddle

來源

2015-11-15 07:53:59 magreenberg

試試這個

<div id="allQuestions" style="float: left;">  
    ...a bunch of text/headers 
</div> 
<div id="myImg" style="float: right;"></div>

來源

2015-11-15 07:56:12

如何將文本放置在HTML/CSS中左側的東西？

回答

相關問題