Нарисуйте сетку 2x1 без использования таблицы

Question

Каков наилучший способ рисовать следующую сетку без использования таблицы или бутстрапа ... просто просто css? Использует ли стол единственный способ?

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>