css - 不一致的 div 溢出 css

Question

我最近发布了一个关于 div 溢出问题的问题，该问题已解决。

但是，当我的 div 通过显示更多内容的复选框选择调整大小时，我的页面现在显示一些不一致的行为。

在右侧，div(向右浮动)调整大小，唯一受影响的其他元素是它们正下方的元素，这是完美的。

但是，左侧 float 的 div 在调整大小时将其下方的元素移至右侧，所有内容都不再对齐并出现巨大的间隙。

这是代码

 <div id="wrapper">
    <div id="main_content">
        <h1 class="standard">Team Directory</h1>
        <div class="plaque_left">
            <h2>Blackhawks</h2>
            <h3>EB Netball CLub</h3>
            <p>www.random.com</p>
            <p>More text</p>
            <p>and more...</p>
            <p>and more</p>
            <p>finally...</p>
                <input type="checkbox" name="show" id="show"/>
                <label for="show">Named Players</label>
                <article class="small">More content here
                    <br/>
                        <br/>and here
                        <br/>end
                </article>
        </div>
    </div>
</div>



        <div class="plaque_right">
            <h2>Blackhawks</h2>
            <h3>EB Netball CLub</h3>
            <p>www.random.com</p>
            <p>More text</p>
            <p>and more...</p>
            <p>and more</p>
            <p>finally...</p>
                <input type="checkbox" name="show" id="show"/>
                <label for="show">Named Players</label>
                <article class="small">More content here
                    <br/>
                        <br/>and here
                        <br/>end
                </article>
        </div>
    </div>
</div>

和 CSS

.plaque_left{ 
display:block ; 
min-height: 23.5em ; 
margin: 1em 1em 1em 5em; 
padding: 0 1em 0 1em;
background: white ; 
-webkit-box-shadow: 0 0 10pt grey ; 
float:left; width:38% ; 
-webkit-border-radius:10pt}

.plaque_right{
display: block;
min-height: 23.5em ; 
margin:1em 5em 1em 1em ; 
padding: 0 1em 0 1em ;
background: white ; 
-webkit-box-shadow: 0 0 10pt grey ; 
float: right ; 
width: 38% ;
-webkit-border-radius:10pt}


.plaque_left article {
background:#d0a9f5 ; 
-webkit-border-radius: 10pt ; 
overflow:hidden ;
height: 0px ; 
position: relative ; 
z-index:10; 
-webkit-transition: 
height 0.3s ease-in-out}

.plaque_left input:checked ~ article { 
-webkit-transition: 0.5s ease-in-out}

.plaque_left  input:checked ~ article.small {
height: 140px ; 
position:relative}

.plaque_right article {
background:#d0a9f5 ; 
-webkit-border-radius: 10pt ; 
overflow:hidden ; 
height: 0px ; 
position: relative ; 
z-index:10; 
-webkit-transition: 
height 0.3s ease-in-out}

.plaque_right input:checked ~ article { -webkit-transition: 0.5s ease-in-out}
.plaque_right  input:checked ~ article.small {height: 140px ; position:relative}

正如我所说，右侧的 plaque_right div 工作正常，但左侧的则不然。不用说，我正在 chrome 中进行测试，因此仅使用 -webkit(稍后会添加其他)。

我在 js fiddle 中尝试过，但窗口不够宽，无法分成两列。

谢谢

Answer 1

你的 chrome 版本是多少？

至少您粘贴的代码在 32.0.1700.102 中运行良好。

前两件事:

1 plaque_left 后面的两个额外的 div 关闭标记。这使得右侧面板脱离了 main_content。 不知道你的真实代码是否有同样的问题。

左面板和右面板中的 2 个输入元素具有相同的名称。 如果您单击右侧面板中的标签，则会打开左侧面板中的文章。

我想这只是您的 html 代码的一部分。 也许问题出在 ~ article.small {height: 140px ;position:relative

你没有在文章的parent中设置位置，所以这篇文章不会相对于div.plaque_left。

它将相对于位置不是静态的第一个父级，这意味着位置是固定的、绝对的或相对的，直到主体。

因此，尝试添加相对于两个斑 block div 的位置。