佈局與DIV元素

Question

我有麻煩使用DIV元素生成以下佈局，alignement和框樣式

Desire layout is here

戰鬥任何幫助將是有益的

問候

Answer 1

試試像這樣

DEMO

.element { 
    margin: 50px; 
    box-sizing: border-box; 
} 

.remaining, .sold { 
    display: table; 
    border: 1px solid #999999; 
    padding: 10px; 
    width: 20%; 
    position: relative; 
    float: left; 
    height: 200px; 
    box-sizing: border-box; 
} 

.remaining { 
    border-right: none; 
    border-top: none; 
} 

.remaining:before { 
    position: absolute; 
    top: -30px; 
    height: 30px; 
    background: #FF7F7E; 
    content: "SHOES - STOCK"; 
    border: 1px solid #999999; 
    color: white; 
    width: 100%; 
    left: 0; 
    line-height: 30px; 
    padding-left: 10px; 
    font-size: 13px; 
    font-weight: bold; 
    right: 0; 
    box-sizing: border-box; 
} 

.top, .center, .bottom { 
    display: table-row; 
} 

.top .inner { 
    display: table-cell; 
    width: 100%; 
    vertical-align: top; 
} 

.center { 
    display: table-cell; 
    width: 100%; 
    vertical-align: middle; 
    text-align: center; 
} 

.center span { 
    display: block; 
} 

.bottom .inner { 
    display: table-cell; 
    width: 100%; 
    vertical-align: bottom; 
} 

.inner-content { 
    display: table; 
} 

.top .inner span, 
.bottom .inner span{ 
    display: table-cell; 
    width: 100%; 
} 


.top .inner span:last-child, 
.bottom .inner span:last-child { 
    text-align: right; 
    font-weight: bold; 
    width: 60px; 
    float: left; 
} 

.center span:first-child { 
    font-size: 70px; 
    font-weight: bold; 
    line-height: 1; 
} 

span u { 
    text-decoration: none; 
    border-bottom: 1px solid red; 
} 

@media(max-width: 1200px) { 
    .remaining, .sold { 
    display: table; 
    width: 30%; 
    height: 200px; 
    } 
} 

@media(max-width: 768px) { 
    .remaining, .sold { 
    display: table; 
    float: none; 
    width: 100%; 
    height: 200px; 
    } 

    .remaining { 
    border-right: 1px solid #999999; 
    border-bottom: none; 
    } 
} 

<div class="element"> 
    <div class="remaining"> 

    <div class="top"> 
     <div class="inner"> 
      <div class="inner-content"> 
       <span>TOTAL</span> 
       <span>250 <u>pcs</u></span> 
      </div>  
     </div> 
    </div> 

    <div class="center"> 
     <span>200</span> 
     <span>REMAINING</span> 
    </div> 

    <div class="bottom"> 
     <div class="inner"> 
     <div class="inner-content"> 
      <span>USED</span> 
      <span>50 <u>pcs</u></span> 
     </div> 
     </div> 
    </div> 

    </div> 
    <div class="sold"> 
    <div class="center"> 
     <span>50</span> 
     <span>SOLD</span> 
    </div> 
    </div> 
</div>