長島冰茶的工程師筆記

注意事項：
使用 Float 自適應寬度(其中一欄為變動寬度)
1. 變動寬度的 block 放在最後面，不加 float
2. 其他 block 看排版，加上 float:left 或 float:right
3. 當有兩個以上的 float:right ，第一個出現的 float:right 會排在最右邊

程式碼：
 

<style>
.base {margin: 30px auto; width:400px;}
.base .block1 {background: #EFE; width:30%; float:right;}
.base .block2 {background: #FEF;}
.base .block3 {background: #EEE; width:30%; float:left;}
.base .block4 {background: #EEF; width:20%; float:right;}

.base2 {margin: 30px auto; width:400px;}
.base2 .block1 {background: #EFE; width:30%; float:right;}
.base2 .block2 {background: #FEF;}

.base3 {margin: 30px auto; width:400px;}
.base3 .block1 {background: #EFE; width:30%; float:left;}
.base3 .block2 {background: #FEF;}
</style>

<div class="base">
    <div class="block3">block3</div>
    <div class="block1">block1</div>
    <div class="block4">block4</div>
    <div class="block2">block2</div>
</div>

<div class="base">
    <div class="block3">block3</div>
    <div class="block4">block4</div>
    <div class="block1">block1</div>
    <div class="block2">block2</div>
</div>

<div class="base2">
    <div class="block1">block1</div>
    <div class="block2">block2</div>
</div>

<div class="base2">
    <div class="block2">block2</div>
    <div class="block1">block1</div>
</div>

<div class="base3">
    <div class="block1">block1</div>
    <div class="block2">block2</div>
</div>

結果：