当 'details' 开放时，强制元素向下移动以使它们不与 'div' 相交

Question

我已经使用 W3school's Responsive HTML tutorial as a part of a large set of "details" elements under "visual media" on my robotics team's website 将调色板设置为一组响应式 div。目前，如果您打开调色板，它会强制其下方的 "details" 元素向右移动以与其右边缘对齐。我希望他们移动以保持在它下面，而不是用 &NBSP; 或 <br> 强行强迫它，这样如果 window 大小发生变化，细节元素将随着调色板的扩展而上下移动合同。

HTML:

   <!--color palette--><details class="indent1"><summary>Color Palette</summary>
    <div id="wrapper" class="palletewrapper">
    <div class="palette" style="background-color:#4169E1;"><p>Power Hawk Blue<br> Hex: 4169E1 <br> RGB: R: 65, G: 105, B: 225 <br> CMYK: C: 71, M: 53, Y: 0, K: 12 <br> Pantone: PMS 7683C</p></div>
    <div class="palette-light" style="background-color:#FFFFFF;"><p>White<br>Hex:FFFFFF<br>RGB: R: 255, G: 255, B: 255<br>CMYK: C: 0, M: 0, Y: 0, K: 0<br>Pantone: #9063 C</p></div>
    <div class="palette" style="background-color:#2f3f58;"><p>Dark Blue<br>Hex: 2f3f58<br>RGB: R: 47, G: 63, B: 88<br>CMYK: C: 47, M: 28, Y: 0, K: 65<br>Pantone: PMS 432C</p></div>
    <div class="palette-light" style="background-color:#9eb0c9;"><p>Slate Blue<br>Hex: 9eb0c9<br>RGB: R: 158, G: 176, B: 201<br>CMYK: C: 21, M: 12, Y: 0, K: 21<br>Pantone: PMS 536C</p></div>
    <div class="palette" style="background-color:#c74f4f;"><p>Power Hawk Red<br>Hex: c74f4f<br>RGB: R: 199, G: 79, B: 79<br>CMYK: C: 0, M: 60, Y: 60, K: 22<br>Pantone: PMS 7418C</p></div>
    <div class="palette-light" style="background-color:#f0ebe7;"><p>Cool Gray<br>Hex: f0ebe7<br>RGB: R: 240, G: 235, B: 231<br>CMYK: C: 0, M: 2, Y: 4, K: 6<br>Pantone: PMS 663C</p></div>
    <div class="palette" style="background-color:#000000;"><p>Black<br>Hex: 000000<br>RGB: R: 0, G: 0, B: 0<br>CMYK: C: 0, M: 0, Y: 0, K: 100<br>Pantone: #6 C</p></div>
    </div>
    </details><!--color palette-->

CSS:

.palette-light{
float: left;
margin: 5px;
padding: 15px;
width: 175px;
height: 175px;
border: 1px solid black;
color:black;}

.palette{
float: left;
margin: 5px;
padding: 15px;
width: 175px;
height: 175px;
border: 1px solid black;
color:white;}

#wrapper {
    width: auto;
    margin: 0 auto 0 auto;
}

Answer 1

好吧，它在 Google Chrome 中似乎对我很有效。也许您有另一种 CSS 样式与这些元素冲突。

您是否尝试过使用 Firefox 的 Firebug 来查看元素所应用的样式？

Answer 2

it forces the "details" elements below it to move right

如果您指的是 'Other Resources' 下列出的链接，那么一种解决方案是将 clearfix solution 应用于包装调色板的 div。

定位此 div 然后应用以下 CSS

details.indent1:before,
details.indent1:after {
    content: " "; 
    display: table;
}

details.indent1:after {
    clear: both;
}

希望对您有所帮助！

当 'details' 开放时，强制元素向下移动以使它们不与 'div' 相交

Forcing Elements to Move Down so That They Don't Intersect a 'div' When 'details' are Open

html

css

responsive-design

alignment

sizing