如何将文本放置在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中左侧的东西？

回答

相关问题