如何使用CSS3實現這個功能？

Question

CSS專家能幫我實現一個給我這個設計的css文件。

Answer 1

這是什麼東西，可以幫助。 http://jsfiddle.net/mf36nLrt/

.photo, .div3{ 
 
    width: 75px; 
 
    height: 90px; 
 
    border: 1px solid #d5d5d5; 
 
    float: left; 
 
} 
 

 
.div1, .div2, .hr, .div4 { 
 
    float: left; 
 
    width: calc(100% - 85px); /* Here 85 is the width of PHOTO + margin + border */ 
 
    margin-left: 5px; /*Adjust this value for the space between photo and DIV#1 */ 
 
    border: 1px solid #d5d5d5; 
 
    height: 50px; 
 
} 
 

 
.hr{ 
 
    border: none; 
 
    border-bottom: 1px solid #d5d5d5; 
 
    margin-top: 5px; 
 
    height: 0px; 
 
} 
 

 
.div2{ 
 
    margin-top: 5px; 
 
    height: 30px; 
 
} 
 

 
.div3{ 
 
    margin-top: 5px;  
 
} 
 

 
.div4{ 
 
    height: 90px; 
 
    margin-top: 5px; 
 
}

<div> 
 
    <div> 
 
     <div class="photo"></div> 
 
     <div class="div1"></div> 
 
     <div class="hr"></div> 
 
     <div class="div2"></div> 
 
    </div> 
 
    <div> 
 
     <div class="div3"></div> 
 
     <div class="div4"></div> 
 
    </div> 
 
</div>

Answer 2

要麼給多規格，或在這裏它是：

.left { 
 
    max-width: 150px; 
 
    background-color: red; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    } 
 
    .right { 
 
    background-color: blue; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    }

<div class="page"> 
 
    <div class="left"> 
 
    <div style="border:1px solid black; margin-bottom:5px;">Photo</div> 
 
    <div style="border:1px solid black; ">Div 3</div> 
 
    </div> 
 
    <div class="right"> 
 
    <div style="border:1px solid black; margin-bottom:5px;">Div 1</div> 
 
    <hr> 
 
    <div style="border:1px solid black;">Div 2</div> 
 
    <div style="border:1px solid black;">Div 4</div> 
 
    </div> 
 
</div>