0

私は自分のイメージを隣に座らせようとしています<H3>

私は自分の画像が入っている場所を浮かせまし<div>た (後で JavaScript を適用します) が、私の人生では、隣にある H3 の隣に約 10 または 12px のスペースを確保することはできません。

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-->
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 に答える