Html 如何使这个盒子反应灵敏？_Html_Css

Html 如何使这个盒子反应灵敏？

html css

Html 如何使这个盒子反应灵敏？,html,css,Html,Css,我制作了两个盒子，想让第二个盒子像上面的绿色盒子一样灵敏。我试图通过使用width:100%来实现这一点，但这并不像示例中那样适用于我这是我的HTML代码： <body> <header> <div id="rand1"> <div id="randelement1a">text</div> <p id="text1">Lorem ipsum

我制作了两个盒子，想让第二个盒子像上面的绿色盒子一样灵敏。我试图通过使用

width:100%

来实现这一点，但这并不像示例中那样适用于我

这是我的HTML代码：

<body>

    <header>

        <div id="rand1">

            <div id="randelement1a">text</div>

            <p id="text1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>

            <div id="randelement1b">text</div>

        </div>

        <div class="platzhalter"></div>

        <div id="rand2">

            <div id="randelement2a">text</div>

            <p id="text2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>

            <div id="randelement2b">text</div>

        </div>

    </header>

</body>

尝试将响应元件#rand2高度更改为

高度：100%和#text2位置到位置：相对
尝试将响应元件#rand2高度更改为高度：100%和#text2位置到位置：相对
绝对定位往往不是响应式web设计的朋友，因为它将元素从正常文档流中移除。在learnlayout.com上，您会注意到您引用的DIV没有使用position:absolute。它使用位置：相对
包含包含
的两个绝对定位
元素。除此之外，它还应用了绿色边框
你还设置了一个特定的高度在你的div上，这往往会挫败响应设计的目的。如果在设置高度时没有足够的空间，而不是包含元素根据内容重新调整大小/形状，则内容将溢出边界
我还看到您正在使用一组ID。这是一个禁忌。请谨慎使用它们，并将其用于JavaScript挂钩。改用可重用的CSS类，即以
开头的类
因此，解决办法是：

从响应元件（如
）中移除绝对定位
从包含的div（#rand1
，#rand1
）中删除高度值，以便它们可以正确地回流其内容

这是一个使用CSS类而不是ID的代码版本。正如您所看到的，它需要的代码要少得多。我还用max width:500px
更新了第一个DIV，这样它就可以在500px
宽度下响应，而不是总是停留在500px


文本

Lorem ipsum dolor sit amet，Conseteteur sadipscing Eliter，sed
不寻常的暂时性劳动和大规模劳动
阿利奎亚姆·埃拉特（aliquyam erat），塞德·迪亚姆·沃卢普图（sed diam voluptua）。在vero eos et accusam et
这是一个很好的例子。Stet clita kasd gubergren，不
海takimata圣殿是一座美丽的圣殿。洛勒姆
伊普苏姆·多洛·希特，康塞特·萨迪普斯金

文本
文本

Lorem ipsum dolor sit amet，Conseteteur sadipscing Eliter，sed
不寻常的暂时性劳动和大规模劳动
阿利奎亚姆·埃拉特（aliquyam erat），塞德·迪亚姆·沃卢普图（sed diam voluptua）。在vero eos et accusam et
这是一个很好的例子。Stet clita kasd gubergren，不
海takimata圣殿是一座美丽的圣殿。洛勒姆
伊普苏姆·多洛·希特，康塞特·萨迪普斯金

文本

。文本框{
位置：相对位置；
边框：3px实心#0aa699；
}
.固定宽度{
最大宽度：500px；
}
.文本框标签{
位置：绝对位置；
背景色：#0aa699；
}
.右上角标签{
左：0；
排名：0；
}
.左下标签{
右：0；
底部：0；
}
.文本框p{
保证金：1.5em 2.5em；
}

演示
演示。
绝对定位往往不是响应式web设计的朋友，因为它将元素从正常的文档流中移除。在learnlayout.com上，您会注意到您引用的DIV没有使用position:absolute。它使用位置：相对
包含包含
的两个绝对定位
元素。除此之外，它还应用了绿色边框
你还设置了一个特定的高度在你的div上，这往往会挫败响应设计的目的。如果在设置高度时没有足够的空间，而不是包含元素根据内容重新调整大小/形状，则内容将溢出边界
我还看到您正在使用一组ID。这是一个禁忌。请谨慎使用它们，并将其用于JavaScript挂钩。改用可重用的CSS类，即以
开头的类
因此，解决办法是：

从响应元件（如
）中移除绝对定位
从包含的div（#rand1
，#rand1
）中删除高度值，以便它们可以正确地回流其内容

这是一个使用CSS类而不是ID的代码版本。正如您所看到的，它需要的代码要少得多。我还用max width:500px
更新了第一个DIV，这样它就可以在500px
宽度下响应，而不是总是停留在500px


文本

Lorem ipsum dolor sit amet，Conseteteur sadipscing Eliter，sed
不寻常的暂时性劳动和大规模劳动
阿利奎亚姆·埃拉特（aliquyam erat），塞德·迪亚姆·沃卢普图（sed diam voluptua）。在vero eos et accusam et
这是一个很好的例子。Stet clita kasd gubergren，不
海takimata圣殿是一座美丽的圣殿。洛勒姆
伊普苏姆·多洛·希特，康塞特·萨迪普斯金

文本
文本

Lorem ipsum dolor sit amet，Conseteteur sadipscing Eliter，sed
不寻常的暂时性劳动和大规模劳动
阿利奎亚姆·埃拉特（aliquyam erat），塞德·迪亚姆·沃卢普图（sed diam voluptua）。在vero eos et accusam et
这是一个很好的例子。Stet clita kasd gubergren，不
海takimata圣殿是一座美丽的圣殿。洛勒姆
伊普苏姆·多洛·希特，康塞特·萨迪普斯金

文本

。文本框{
位置：相对位置；
边框：3px实心#0aa699；
}
.固定宽度{
最大宽度：500px；
}
.文本框标签
#rand1 {
position: relative;                
width: 500px;
height: 112px;
border-style: solid;
border-width: 3px;
border-color: #0aa699;
}

#randelement1a {
position: absolute;                 
left: 0;
top: 0;
display: inline;                 
background-color: #0aa699;
}

#text1 {
position: absolute;
top: 20px;
}

#randelement1b {
position: absolute;                
right: 0;
bottom: 0;
display: inline;
background-color: #0aa699;
}

/*RESPONSIVE:*/

#rand2 {
position: relative;
width: 100%;
height: 112px;
border-style: solid;
border-width: 3px;
border-color: #0aa699;
}

#randelement2a {
position: absolute;
left: 0;
top: 0;
display: inline;
background-color: #0aa699;
}

#text2 {
position: absolute;
top: 20px;
}

#randelement2b {
position: absolute;
right: 0;
bottom: 0;
display: inline;
background-color: #0aa699;
}