0

我试图让我的图像坐在旁边<H3>

我浮动了<div>我的图像所在的位置（稍后将对其应用一些 JavaScript），但对于我的生活，我无法让它在它旁边的 H3 旁边有大约 10 或 12 像素的空间。

如果我应用 130px 左右的边距，我可以做到这一点，但是有一些 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-->
4

2 回答 2

0

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

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

结果：

在此处输入图像描述

这是基于我们讨论的更具体的解决方案（已删除的样式进行了评论）：

.mainRight h3 {
    display: inline-block;
}
.expandingBtn {
    display: inline-block;
    float: none;
    /* margin-right: 135px; */
    /* margin-top: -13px; */
    /* clear: both; */
}
于 2013-08-29T16:49:29.027 回答
0

你可以浮动 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;}
于 2013-08-29T16:17:51.097 回答