Question

我在父div中并排有两个div - 左边的div将包含文本，而右边的div将包含一个图像，而在单击按钮时，右边的div可以展开，或缩小回原来的宽度。

<style>
.parent{
  width: 100%;
  border: 1px solid blue;
  padding: 2px;
  float: left;
}
.left{
  width: 60%;
  float: left;
  border: 1px solid red;
}
.right{
  width: 38%;
  border: 1px solid orange;
  float: right;
}
</style>

<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
    <div class="left">Left Content</div>
    <div class="right">Right Content</div>
</div>

javascript扩展/缩小div：

$("#button1").click(function(){
    var inputValue=$("#button1").attr('value');

    if(inputValue=="Expand")
    {
        $(".right").animate({width:"60%"});
        $("#button1").attr('value','Reduce');
    }
    else if(inputValue=="Reduce")
    {
        $(".right").animate({width:"38%"});
        $("#button1").attr('value','Expand');
    }
});

现在，当我增加右边div的宽度时，它会滑动到左边的div下方。但我想要的是左侧div相应地减小尺寸，并采用父级内可用的剩余宽度，左右div保持并排。

JSFiddle

我的CSS很弱，而且我猜这是我可以在css中做的事情，而不必使用javascript来调整左边的div。建议一如既往地赞赏。

Answer 1

您的左侧div没有更新正确的尺寸，因此您的容器超过100％。我在这里修好了：

$("#button1").click(function(){
    var inputValue=$("#button1").attr('value');
    
    if(inputValue=="Expand")
    {
        $(".right").animate({width:"60%"});
        $(".left").animate({width:"38%"});
        $("#button1").attr('value','Reduce');
    }
    else if(inputValue=="Reduce")
    {
        $(".right").animate({width:"38%"});
        $(".left").animate({width:"60%"});
        $("#button1").attr('value','Expand');
    }
});

.parent{
  width: 100%;
  border: 1px solid blue;
  padding: 2px;
  float: left;
}
.left{
  width: 60%;
  float: left;
  border: 1px solid red;
}

.right{
  width: 38%;
  border: 1px solid orange;
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>

Answer 2

自己不是很好，但也许像http://jsfiddle.net/fd9pos8m/这样的东西？虽然不顺利

<div style="padding:2px; width:500px; background: #FFFFFF ">
    <div class="left" style="float:left; width:50%; background: #ff0000 ">Left Content</div>
    <div class="right" style="margin-left:52%; width:38%; background: #000000 ">Right</div>
    <div style="clear:both"></div>

    <input type="button" id="button1" value="expand">
</div>
<script>
$('#button1').click(function(){
            var val = $(this).val();
            if(val == 'expand') {
                $('.right').animate({width:'60%'});
                $(this).val('reduce');
            } else {
                $('.right').animate({width:'38%'});
                $(this).val('expand');
            }
        });
</script>

Answer 3

这里试试这个有用吗？ http://jsfiddle.net/CFNUJ/917/ #right-bg {留在#left-bg

第一个是使用css

Answer 4

如何使用css flexbox？你不必担心这个问题。如果没有足够的空间，那么.left或.right会跳下来，它只是为你处理这种情况。

请记得检查浏览器对flexbox的支持。

我只调整了css：

.parent{
  width: 100%;
  border: 1px solid blue;
  padding: 2px;
  display: flex;
}
.left{
  width: 60%;
  border: 1px solid red;
}

.right{
  width: 38%;
  border: 1px solid orange;
}

的jsfiddle http://jsfiddle.net/sen3t6vk/74/

如果兄弟扩展，减少div宽度

4 个答案: