0

我搜索了很多，但现在想问，因为我没有找到答案：

如果有两个 div 元素应该彼此相邻且全宽（每个元素正好是全宽的 50%）。可能是第一个或第二个 div 被隐藏（style="display=none"）。在这种情况下，另一个 div 应该全宽显示。

我的解决方案是这样的：

<table style="width: 100%;">
    <tr>
        <td style="padding: 0px;">
            <div id="div1">
                ...
            </div>
        </td>
        <td style="padding: 0px;">
            <div id="div2">
               ...
            </div>
        </td>
    </tr>
</table>

这几乎是完美的，但是当两个 div 都显示时，第一个似乎是 55%，第二个是宽度的 45%。

如果当然我可以在隐藏另一个时将 div 的宽度设置为 100%，但我想避免这样做。

当两者都显示时，有没有人有解决方案使它们都达到 50%。

4

5 回答 5

0

没有表的 JQuery 方法

您可以使用 JQuery（或纯 javascript）来实现这一点，我假设您无论如何都在使用它来显示/隐藏元素。

$("#ButtonOne").click(function () {
    $(".one").toggle();
    if($(".one").is(":visible")){
        $(".two").css("width", "50%");
    }
    else{
        $(".two").css("width", "100%");
    }
});
$("#ButtonTwo").click(function () {
    $(".two").toggle();
    if($(".two").is(":visible")){
        $(".one").css("width", "50%");
    }
    else{
        $(".one").css("width", "100%");
    }
});

上面的 JQuery 假设有两个按钮用于切换元素的可见性。

这是一个例子

在这个例子中，应该注意的是，使用 50% 的宽度inline-block需要元素之间的零空白。因此</div><div...要求。

您还需要一些vertical-align:top;以确保 DIV 元素保持一致。

万一链接中断，这里是随附的 HTML ...

<div class="main">
    <div class="one">this is one</div><div class="two">this is two</div>
</div>
<input type="button" id="ButtonOne" value="Toggle one" />
<input type="button" id="ButtonTwo" value="Toggle two" />

...和CSS ...

body{
    margin:0;
    padding:0;
}
div{
    margin:0;
    padding:0;
}
.one {
    background-color:red;
    height:100px;
    width:50%;
    display:inline-block;
}
.two {
    background-color:blue;
    height:100px;
    width:50%;
    display:inline-block;
}
于 2013-04-16T11:00:32.133 回答
0

使用table-layout:fixed：

编辑：

您必须在 td 上设置 display:none，而不是在 div 上。

<table style="width: 100%; table-layout:fixed">
<tbody>
    <tr>
        <td style="padding: 0px; width:50%">
            <div id="div1" style="border: 1px solid black">
                This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text This is a long text 
            </div>
        </td>
        <td style="padding: 0px; width:50%; display: none;">
            <div id="div2" style="border: 1px solid black">
               This isn't as long as the other text.
            </div>
        </td>
    </tr>
</tbody>
</table>

我已经在 Chrome、Firefox 和 IE10 上测试过了

于 2013-04-16T11:01:33.997 回答
0

您可以将两个 div 放在同一个表格单元格中吗？

<table style="width: 100%;">
    <tr>
        <td>
            <div id="div1">
                ...
            </div>
            <div id="div2">
               ...
            </div>
        </td>
    </tr>
</table>

你可以简单地切换一个类....

table { width: 100%; padding:0; }
td { padding:0; margin:0; }
td > div { width: 50%; display: block; float: left; height: 50px; cursor: pointer; }
#div1 {background: #a00;}
#div2 {background: #00a;}
.wide {width: 100%;}
.hide { display: none;}

和jQuery ...

$('div').click(function () {
    $(this).toggleClass('wide');
    $('div').not(this).toggleClass('hide');
});

在这里演示

可以轻松地为多个 div 工作：演示 2

于 2013-04-16T11:23:04.213 回答
0

您可以通过在 td 本身中设置宽度来实现这一点，当您想要隐藏任何一个 div 时，只需添加“display:none;” 在指定的 td 而不是 div 中，则剩余的 div 将具有 100% 的宽度。

 <table style="width: 100%;">
        <tr>
            <td style="padding: 0px; width:50%;">
                <div id="div1" >
                    hii
                </div>
            </td>
            <td style="padding: 0px;width:50%;">
                <div id="div2" style="">
                   byyee
                </div>
            </td>
        </tr>
    </table>
于 2013-04-16T13:39:48.057 回答
0

好了朋友们，

谢谢你的帮助。现在我找到了我正在寻找的东西：

<table style="width: 100%;">
    <tr>
        <td id="td1" style="padding: 0px; min-width:50%;">
            <div>
                ...                       
            </div>
        </td>
        <td id="td2" style="padding: 0px; min-width:50%;">
            <div>
                ...                       
            </div>
        </td>
    </tr>
</table>

两个 td 标签彼此相邻，并且都占 50%。隐藏 td1 或 td2 时，另一个 td 自动进入全宽。

此致...

于 2013-04-16T12:24:51.723 回答