Question

我正试图将我的图片放在<H3>

旁边

我浮动了我的图像所在的<div>（稍后会对它应用一些JavaScript），但对于我的生命，我无法让它在H3旁边有一个大约10或12px的空间它就在旁边。

如果我应用130px左右的边距权限，我可以做到这一点，但是有些H3元素每次都不会是相同的长度。我以为我可以让<h3>只有一个自动宽度，这样只要文本停止就会停止（就像我的<h5>和<h4>元素似乎正在做的那样。），但似乎占据整条线。因此，如果我应用margin-right:130px或更多，我的问题就会出现（如您所见），因为后续的<h3>元素会比“复杂因素”更长。

我想知道我是否应该将div中的<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

你可以浮动h3并设置margin-right：12px;在它上面

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

并在h3和.expandingBtn

之后添加<div class="clear"></div>之类的内容

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

Answer 2

如果我理解正确，你可以通过添加这些样式解决问题：

.mainRight h3 {
    display: inline-block;
}
.expandingBtn {
    display: inline-block;
    float: none;
}

结果：

enter image description here

以下是基于我们讨论的更具体的解决方案（已删除的样式已注释）：

.mainRight h3 {
    display: inline-block;
}
.expandingBtn {
    display: inline-block;
    float: none;
    /* margin-right: 135px; */
    /* margin-top: -13px; */
    /* clear: both; */
}

不能让我的浮动元素坐在我想要的地方

2 个答案: