Question

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

然而，当我的div通过复选框选择调整我的div时会显示一些不一致的行为，这会显示更多内容。

在右侧，div（向右浮动）调整大小，唯一受影响的其他项目就是它们正下方，这是完美的。

但是，左侧浮动的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小提琴中试过但是窗口不够宽，无法进入两列。

由于

Answer 1

您的Chrome版本是什么？

至少您粘贴的代码在32.0.1700.102中正常工作。

前两件事：

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

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

我想这只是你的HTML代码的一部分。也许问题出现在~article.small {height：140px;位置：相对}

您没有在文章的父级中设置位置，因此本文不会与div.plaque_left相关。

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

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

不一致的div溢出css

1 个答案: