Question

我有一个<div id>，其中包含多个<div class>，确切地说是3。每个类中都有一个<span>元素。像这样;

<div id="section">
    <div class="phones"><span>Our Phones</span></div>
    <div class="contract"><span>Our Contracts</span></div>
    <div class="network"><span>Our Network</span></div>
</div>

班级的每种风格都是这样的;

.phones {
    background-image: url('../img/c_button_1.png');
    background-repeat: no-repeat;
    transition: background-image 0.2s ease-in-out;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-top: 5px;
    margin: 15px;
    text-align: center;
    line-height: 230px;
    color: #fff;
}
.phones:hover {
    transform: 2s;
    background-image: url('../img/c_button_1_hover.png');
    cursor: pointer;
}

到目前为止，一切正常。我的问题是，我有一个按钮来控制网站的文字大小，小，中，大。 Small和Medium正确工作，Large会导致<span>元素创建具有显着高度的文本的换行符。这是我改变文本大小的jQuery代码。

    <script>

        $(document).ready(function(){

  $("#small").click(function(event){
    event.preventDefault();
    $("li").animate({"font-size":"16px"});
    $("h1").animate({"font-size":"16px"});
    $(".block").animate({"font-size":"16px", "line-height":"16px"});
    $("span").animate({"font-size":"10px"});

  });

  $("#medium").click(function(event){
    event.preventDefault();
    $("li").animate({"font-size":"22px"});
    $("h1").animate({"font-size":"22px"});
    $(".block").animate({"font-size":"22px", "line-height":"22px"});
    $("span").animate({"font-size":"18px"});

  });

  $("#large").click(function(event){
    event.preventDefault();
    $("li").animate({"font-size":"30px"});
    $("h1").animate({"font-size":"30px"});
    $(".block").animate({"font-size":"30px", "line-height":"30px"});
    $("span").animate({"font-size":"28px", "white-space":"nowrap"});
  });

  $( "a" ).click(function() {
   $("a").removeClass("selected");
  $(this).addClass("selected");

 });

});
</script>

JSFiddle：https://jsfiddle.net/1n5csbkd/

Answer 1

使用此CSS，其中行高更改为30px而不是230px。

.phones {
    background-image: url('../img/c_button_1.png');
    background-repeat: no-repeat;
    transition: background-image 0.2s ease-in-out;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-top: 5px;
    margin: 15px;
    text-align: center;
    line-height: 30px;
    color: #fff;
}
.phones:hover {
    transform: 2s;
    background-image: url('../img/c_button_1_hover.png');
    cursor: pointer;
}

Answer 2

我相信它正在发生，因为你的字体太大而不适合内部＆＃34;电话div＆＃34;。你设置高度：100px和宽度：100px到那个div，当你选择更大的字体时，它不知道如何表现，所以你的布局被打破了。

我要做的是：将文字放在那个电话div之外，这样你就可以更好地管理它。

像这样：

<div class="mainDivPhone">
   <div class="phone">
   </div>
   <div class="phoneLegend">
      <span>your text</span>
   </div>
</div>

Span元素在文本大小调整时创建大的高度

2 个答案: