8. Twitter 网页布局
分享给更多人
-通过 / -执行
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
- when viewport width is not enough, set left column to 40px wide and middle column to stretching.
- middle column has maximum width of 240px
- when there is enough space, show right column which has width of 120px
- if there is more space, set left column to 80px
- 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.