0

我有一个带有浮动左侧属性的分隔器，其中包含一些文本，然后分隔器浮动右侧包含一个图像。两个分隔线的总宽度不应大于 735，我为图像保留 200。如果图像存在，如何将第一个分隔符的宽度调整为 535，如果图像隐藏，如何调整为 735？

<div style="width:735px">
    <div style="float:left; width=????????>
        some text here
    </div>
    <div style="float:right">
        <img src="../images/biteme.png" alt="" style="height:auto; width:auto; max-height:115px; max-width:200px; display:block" />
    </div>
</div>
4

3 回答 3

3

要在纯 CSS 中做到这一点很容易，您需要一种不同的方法。只浮动一个div，然后另一个会自动占用剩余空间

演示http://jsfiddle.net/kevinPHPkevin/gAUR5/

img {
    width: auto;
    height: auto;
    max-width: 200px;
    display: block;
}

将imgcss 设置为display: none并查看其他 div 占用了所有剩余空间。

于 2013-07-17T19:54:01.677 回答
1

我不确定这是否正确回答了您的问题，但我认为一种解决方案可能是将左 div（除法）的宽度设置为“自动”而不是固定宽度。此外，您应该考虑将两个元素都向右浮动，以便左 div 可以响应右 div 大小的变化。

否则，您将需要依赖 javascript 来影响 DOM 元素（JQuery 将使这更容易）。

于 2013-07-17T19:49:18.847 回答
1

如果你可以使用 JQuery，这将实现这个技巧：

$(document).ready(function(){
    var width;
    if($('#outerdiv #rightdiv img').is(":visible")) {
        width = 735;
    } else {
        width = 535;
    }
    $('#outerdiv #leftdiv').css('width', width);
});

如果你不能使用 JQuery，我认为你想做的事情是不可能的。

于 2013-07-17T19:49:25.230 回答