Html 两个容器以全宽相邻（每个容器都可以隐藏）

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

如果有两个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都显示时，第一个div似乎是宽度的55%，第二个div是宽度的45%

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

---

是否有人有一种解决方案，可以在两个表都显示时将它们都设置为50%。

一种没有表的JQuery方法

您可以使用JQuery（或纯javascript）实现这一点，我假设您正在使用JQuery显示/隐藏元素

$("#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%宽度的

内联块

需要在元素之间使用零空格。因此

使用
表格布局：固定
：

编辑：

您必须设置显示：td上无，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上测试过了，你能把这两个div放在同一个单元格中吗

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

而jquery

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


可以轻松地为多个div工作：
好的，伙计们

谢谢你的帮助。现在我找到了我正在搜索的内容：

<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自动进入全宽

致以最诚挚的问候…
您可以通过在td本身中设置宽度来实现这一点，当您想要隐藏任何一个div时，只需在指定的td中添加“display:none；”而不是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>


hii
拜耶
我测试了你的代码，效果很好……事实上是的，但这取决于div的内容。第一个div的宽度比第二个大，因此显示的宽度约为55%，第二个为45%……感谢你的建议，但是如果使用style=“display:none；”使一个div不可见另一个div应该出现在整个宽度上…感谢您的解决方案。正如我所提到的，我希望避免使用javascript更改css的宽度。感谢您的解决方案。正如我所提到的，我希望避免像使用javascript更改宽度那样更改css。
$('div').click(function () {
    $(this).toggleClass('wide');
    $('div').not(this).toggleClass('hide');
});

<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>

 <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>