Question

现在我能够在屏幕左侧获得一组文本，但它位于图像下方。我怎样才能得到它以便它位于该图像的左侧？此外，当我尝试在CSS中对齐文本时，它不会做任何事情。到目前为止我定位它的方式是HTML。

这就是我所拥有的：

   <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>

以下是我所拥有的屏幕截图：

等等，为什么屏幕截图没有显示......？

Answer 1

您可以使用绝对定位将文本浮动到图像的左侧。

在此处了解位置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

Answer 2

试试这个

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

如何在HTML / CSS的左侧定位文本？

2 个答案: