8. Twitter 网页布局

CSSLayout

  -通过 / -执行

Open Twitter's website and change the window size, you'll notice that layout changes responsively.

Let's do something similar in this problem, suppose we have HTML structure as below.

<div class="container">  <div class="left">left</div>  <div class="middle">middle</div>  <div class="right">right</div></div>

Now please complete the CSS to satisfy following requirement

  1. when viewport width is not enough, set left column to 40px wide and middle column to stretching.
  2. middle column has maximum width of 240px
  3. when there is enough space, show right column which has width of 120px
  4. if there is more space, set left column to 80px
  5. when right column is visible, set minimum 10px space horizontally to the viewport border

It is a bit hard to explain clearly, but following screenshots might be easier to understand.

1.100 x 150

2.200 x 150

3.300 x 150

4.360 x 150

5.400 x 150

6.420 x 150

7.460 x 150

8.500 x 150