Question

我有切换图像，在图像旁边放了一些文本。带浮子。

$(document).ready(function() {
  $("#btn1").click(function() {
    $(".question-hide").toggle();
  });
});

#btn1 {
  float: left;
  padding-left: 5px;
}

#click-button-text {
  float: left;
  padding: 5px 0 5px 5px;
}

<div class="row">
  <div class="main-frame">
    <div class="frame-wrapper">
      <img class="idea-image" src="img/idea.png">

      <img id="btn1" src="img/button1.png" alt="button image">
      <p id="click-button-text">
        をクリックするとアンサーがご覧になれます。</p>
      <p class="question-hide">Text is right below the button</p>
    </div>
  </div>
</div>

但具有此浮动-切换开关中的文本也浮动到左侧。

Todo：
所以我希望它位于按钮的正下方。
但是我无法弄清楚解决方法。

Answer 1

之所以这样，是因为文本的容器(<p id="click-button-text">)的宽度不是100％因此，它将占用剩余空间，使其减少100％。

我建议为网格结构使用类似bootstrap的框架。

注意：对此可以有更多方法，我已经提供了快速解决方法

运行代码以查看：

$(document).ready(function(){
    $("#btn1").click(function(){
        $(".question-hide").toggle();
    });
});

#btn1 {
    float: left;
    padding-left: 5px;
}

#click-button-text {
    float: left;
    padding: 5px 0 5px 5px;
    width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="main-frame">
        <div class="frame-wrapper">
            <img class="idea-image" src="img/idea.png">

            <img id="btn1" src="img/button1.png" alt="button image"> 
            <p id="click-button-text">をクリックするとアンサーがご覧になれます。</p>
                <p class="question-hide">Text is right below the button</p>
        </div>
    </div>
</div>

清除固定的切换文字

1 个答案: