Question

我有一个具有浮动左侧属性的分隔符，其中包含一些文本，然后分隔符浮动右侧的图像。两个分频器的总宽度不应大于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>

Answer 1

要在纯CSS中执行此操作很容易，您需要一种不同的方法。只浮动一个div然后另一个将自动占用剩余空间

DEMO http://jsfiddle.net/kevinPHPkevin/gAUR5/

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

将img css设置为display: none，并看到另一个div占用了所有剩余空间。

Answer 2

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

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

Answer 3

如果你可以使用JQuery，这将做到这一点：

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

如果你不能使用JQuery，我认为你不想做什么。

如果存在图像，请调整分隔宽度

3 个答案: