Question

我正在努力做到这一点：

黑色div必须带有一些背景色，但宽度为100％。红色div必须最大宽度为900px，但能够缩小至少300px（不小于该值）。忽略蓝色div，错误地做了。贪婪div必须最大150px，但能够缩小至少100px（不小于）。并且橙色div必须填满所有这些空间（600px，如果绿色div为150px（最大），如果绿色div为100px（min），那么它应该缩小至少100px;）。

我有一个huuuuge问题makin'这个工作。我只是无法弄清楚如何使这个缩小'认为正常工作：/我所有尝试'是最大宽度，最小宽度和宽度自己玩，但每次都有一些不起作用我希望它能发挥作用。唯一的想法是工作正常，是黑色div。只需将其宽度和高度设为100％即可。

我只想用css和html制作这个，当然还有尽可能的交叉浏览

Answer 1

我认为您在此处缺少的链接是使用媒体查询。

MDN有一个很好的指南：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

基本上，这可以让你根据页面的宽度更改CSS。

Answer 2

不确定我是否完全理解你想要的东西，但是这样的东西？

jsfiddle

<强> HTML

<div id="black">
    <div id="red">
        <div class="green first">Word </div>
        <div class="green second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud"</div>
        <div id="orange">Sed ut perspiciatis unde omnis iste natus errorsit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur</div>
    </div>
</div>

<强> CSS

#black {
    width: 100%;
    height: 50px; /* just for example */
    background-color: #000; 
    text-align: center; /* center red div, because it is inline block */
}
#red {
    overflow: hidden;
    min-height: 100%;
    min-width: 300px;
    max-width: 900px;
    display: inline-block; /* inline block, so it's width will be based on content inside him */
    background-color: red;
    /* text-align: left; if you don't want have centered text */
}
.first {
    float: left;
}
.second {
    float: right;
}
.green {
    max-width: 150px;
    min-width: 100px; 
    min-height: 100%;
    background-color: green;
    padding-bottom: 100%;
    margin-bottom: -100%;
}
#orange {
    background-color: orange;
    min-height: 100%;
    overflow: hidden;

    max-width: 600px;
    min-width: 100px;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

如果其中一个绿色div是空的，它可能不起作用。

红色

overflow: hidden;

这是绿色和橙色

padding-bottom: 100%;
margin-bottom: -100%;

使他们的身高始终相同。

黑色

text-align: center;

使红色的会居中，因为它是内嵌块。

使用css中overflow: hidden的html中间div（橙色）作为最后一个，使其扩展这些绿色div之间的空间。

修改

编辑我的代码，因为我读错了问题

关于如何使用div的几个问题

2 个答案: