Question

我使用W3school's Responsive HTML tutorial将调色板设置为一组响应式div，作为我robotics team's website上“视觉媒体”下的大量“细节”元素的一部分。目前，如果您打开调色板，它会强制它下面的“细节”元素向右移动以与其右边缘对齐。我希望他们能够保持低于它而不会强行使用&NBSP;或<br>，这样如果窗口大小发生变化，细节元素将随着调色板的扩展和收缩而上下移动。

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

在谷歌浏览器中，它似乎对我有用。也许你有另一种与这些元素冲突的CSS风格。

您是否尝试使用Firefox的Firebug来查看哪些样式应用于元素？

Answer 2

它强制它下面的“细节”元素向右移动

如果您指的是“其他资源”下列出的链接，那么一种解决方案是将clearfix solution应用于包裹调色板的div。

定位此div然后应用以下CSS

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

details.indent1:after {
    clear: both;
}

希望这有帮助！

当'详细信息'打开时，强制元素向下移动，以便它们不会与'div'相交

2 个答案: