不使用表格繪製2x1網格

Question

不使用表格或引導程序繪製下列網格的最佳方式是什麼？使用表格是唯一的方法嗎？

Answer 1

試一次

.step1{ 
 
    position:relative; 
 
    width:98%; 
 
    height:100px; 
 
    border:1px solid red; 
 
    padding:5px; 
 
} 
 
.left{ 
 
    width:50%; 
 
    float:left; 
 
    height:100%; 
 
    border:1px solid #600; 
 
} 
 
.right{ 
 
    width:48%; 
 
    float:right; 
 
    height:100%; 
 
    border:1px solid #ff8800; 
 
} 
 
.step2{ 
 
    width:98%; 
 
    height:100px; 
 
    border:1px solid blue; 
 
    padding:5px; 
 
}

<div class="step1"> 
 
<div class="left"></div> 
 
<div class="right"></div> 
 
</div> 
 
<div class="step2"></div>

Answer 2

可以有多種方式，這只是一個例子：

.col,.container { 
 
    border:1px solid #000000; 
 
    } 
 
.row1 { 
 
    display:flex; 
 
    } 
 
.col { 
 
    flex:1; 
 
    }

<div class="container"> 
 
    <div class="row1"> 
 
     <div class="col">col1</div> 
 
     <div class="col">col2</div> 
 
    </div> 
 
    <div class="row2">row2</div> 
 
</div>

Answer 3

使用Flexbox的以最小的標記，記布勞爾兼容性問題保持與Flexbox的：http://caniuse.com/#feat=flexbox

.container { 
 
    border:1px solid #000000; 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
    } 
 
.col { 
 
    border:1px solid #000000; 
 
    flex-grow:1; 
 
    } 
 
.row { 
 
    flex-basis:100%; 
 
    }

<div class="container">  
 
     <div class="col">col1</div> 
 
     <div class="col">col2</div>  
 
     <div class="row">row</div> 
 
</div>