html - 无法让我的 float 元素位于我想要的位置

Question

我正在尝试让我的图片位于 <H3> 旁边

我 float 了 <div>我的图像位于其中(稍后将对其应用一些 JavaScript)，但对于我来说，我无法让它在它旁边的 H3 旁边有大约 10 或 12 像素的空间。

如果我应用 130px 左右的 margin-right 就可以做到，但是有一些 H3 元素每次的长度都不一样。我以为我可以得到 <h3>只是有一个自动宽度，所以它会在文本停止时停止(就像我的 <h5> 和 <h4> 元素似乎正在做的那样。)，但它似乎占据了整行。因此，如果我应用 margin-right:130px，我的问题就会出现(如您所见)或更多，因为有后续 <h3>比“复杂性因素”更长的元素。

我想知道我是否应该坐我的 <h3>也许在 div 内的那个部分中的元素并在该 div 上设置尺寸？无论如何，这是我的 CSS(诚然，对于定位，我有点不稳定)

这是有问题的页面:

http://scope-stage.scholastic.com/issues/090113/narrative-nonfiction

            /******EXPAND AND COLLAPSE BUTTONS******/

       .expandingBtn img { 
      float:right;
      background-image:('expandBtn.png');
      margin-right:115px;
      margin-top:-13px;
      clear:both;
}

and my markup:
              <h3 class="colorScheme">
                Complexity Factors</h3>
            <div class="expandingBtn">
                <img src="/resource/uploads_scope/img/expandBtn.png" /></div>
            <p>
                See how this text will challenge your students.</p>
            <!--THIS SECTION WILL BE HIDDEN UNTIL A THE EXPAND BUTTON IS CLICKED-->
            <div class="hidden">
                <h4>
                    Purpose</h4>
                <p class="times">
                    The article has a clear purpose&mdash;to inform readers about how a brave teenager stood up to the Taliban&mdash;as well as an implicit purpose&mdash;to show how just getting an education is difficult for many young people around the world.</p>
                <h4>
                    Knowledge Demands</h4>
                <p class="times">
                    Comprehension will be aided by knowledge of current world events and geography. The major topics (free speech, the Taliban, terrorism, girls&rsquo; education worldwide, fighting oppression) will be unfamiliar to many students.</p>
                <h4>
                    Language Conventionality and Clarity:</h4>
                <p class="times">
                    <strong>Vocabulary:</strong> Many higher academic vocabulary words (e.g., oppressive, pseudonym, unwittingly)</p>
                <p class="times">
                    <strong>Figurative language:</strong> Includes personification (&ldquo;fear was her constant companion&rdquo;) and metaphor (Malala&rsquo;s voice is likened to a weapon)</p>
                <h4>
                    Structure</h4>
                <p class="times">
                    A nonlinear structure that starts in 2012 then goes back to 2007 and then forward to 2013. Includes narrative and informational passages.</p>
            </div>
            <!--THIS ENDS THE FIRST HIDDEN SECTION-->

Answer 1

你可以 float h3并设置margin-right:12px;在上面

h3 {float:left; margin-right:12px;}
.expandingBtn {float:left;} .expandingBtn img {float:none; margin-right:0;}

并添加类似 <div class="clear"></div> 的内容在 h3 和 .expandingBtn 之后

.clear {
   clear:both; 
   width:100%;
   line-height:0; 
   font-size:0;}