Question

我正在构建两个盒子，并希望使第二个盒子像http://de.learnlayout.com/display.html上的绿色框一样响应。我试图通过使用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>

和CSS文件：

#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;
}

Answer 1

尝试将响应元素＃rand2高度更改为height: 100%;，将#text2位置更改为position: relative;

Answer 2

绝对定位往往不是您的响应式网页设计的朋友，因为它从正常的文档流程中获取元素。在learnlayout.com上，您会注意到您引用的DIV不使用position: absolute;。它使用position: relative;来包含两个包含<span>的绝对定位<div>元素。除此之外，它还有一个绿色边框。

你也在你的DIV上设置一个特定的高度，这往往会破坏响应式设计的目的。如果在设置高度时没有足够的空间而不是包含元素重新调整大小/重新塑造内容，则您的内容将超出边界。

我也看到你正在使用一堆ID。这有点不禁。谨慎使用它们并使用JavaScript钩子。使用可重用的CSS类，即以.开头的。

所以，解决方案是：

从<p>等响应元素中删除绝对定位。
从包含的DIV（#rand1，#rand1）中删除高度值，以便他们可以重排其内容。

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

<header>
    <div class="text-box fixed-width">
        <span class="text-box-label upper-right-label">text</span>
        <p>
            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>
        <span class="text-box-label lower-left-label">text</span>
    </div>
    <div class="platzhalter"></div>
    <div class="text-box">
        <span class="text-box-label upper-right-label">text</span>
        <p>
            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>
        <span class="text-box-label lower-left-label">text</span>
    </div>
</header>

.text-box {
  position: relative;
  border: 3px solid #0aa699;
}
.fixed-width {
  max-width: 500px;
}
.text-box-label {
  position: absolute;      
  background-color: #0aa699;
}
.upper-right-label {
  left: 0;
  top: 0;
}
.lower-left-label {
  right: 0;
  bottom: 0;
}
.text-box p {
  margin: 1.5em 2.5em;
}

演示JSFiddel using CSS classes。

演示JSFiddle using CSS IDs。

如何让这个盒子响应？

2 个答案: