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

Not sure if I fully understand what you wanted, but something like this?

不确定我是否完全理解你想要的东西,但这样的东西呢?

jsfiddle

HTML

    

        
Word 
        
"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"
        
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
    

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

If one of those green divs is empty, it will probably not work.

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

This in red

这是红色的

overflow: hidden;

and this in green ones and orange

这是绿色和橙色

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

makes that they'll have always same height.

使他们总是有相同的高度。

This in black

这是黑色的

text-align: center; 

makes that red one will be centered because it is inline-block.

使红色的一个将居中,因为它是内联块。

And making middle div (orange) as last one in html with overflow: hidden in css, makes it to expand the space between those green divs.

并在html中将中间div(橙色)作为最后一个使用溢出:隐藏在css中,使其扩展这些绿色div之间的空间。

EDIT

Edited my code because I read the question wrong

编辑我的代码,因为我读错了

I think your missing link here is the use of media queries.

我认为你在这里缺少的链接是使用媒体查询。

MDN has a great guide:

MDN有一个很棒的指南:

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

Essentially, this lets you change the CSS depending on the width of the page.

从本质上讲,这可以让您根据页面的宽度更改CSS。