4格，最後一排雙層堆疊另一個DIV中

Question

我試圖做到的是這個

我在它目前的工作，只是不能得到它的權利，我開始2個jsfiddles試圖做到這一點，但沒有工作中。

verison 1：http://jsfiddle.net/ewa0nLjk/1/

.tutlist { 
    width:500px; 
    height:75px; 
    padding:5px; 
    background-color: #dddddd; 
    margin: 40px; 
    /*margin not required*/ 
} 
.tutlist div { 
    background-color: #ff0000; 
} 
.left { 
    width: 75px; 
    float:left; 
    height:100%; 
    display: inline; 
} 
.middle { 
    width: 500px; 
    height:100%; 
    display: inline; 
} 
.right { 
    width: 120px; 
    float:right; 
    height:100%; 
    display: inline; 
} 

    <div class="tutlist">  
     <div class="left"> 
     <img src="https://c2.staticflickr.com/4/3726/13855354235_887ae071c0_s.jpg"/></div>  
     <div class="middle">how to send an email in php code testing it</div>  
     <div class="right">double</div> 
    </div> 

版本2：http://jsfiddle.net/R65fA/1/

#header { 

    padding:5px; 
    background-color: #dddddd; 
    margin: 30px; 
    width:500px; 
    /*margin not required*/ 
} 
.header-left { 
    width:75px; 
    display:inline; 
    float:left; 
    background:red; 

} 
.logo { 
    width:409px; 
    display:inline; 
    background:red; 


} 
.header-right { 
    width:75px; 
    background:red; 
    float:right; 
    display:inline; 
} 

#clear { 
     clear: both; 
    font-size: 0; 
    height: 0; 
    line-height: 0; 
    margin: 0; 
    padding: 0; 
} 
<div id="header"> 
     <div class="header-left"> 
      <img src="https://c2.staticflickr.com/4/3726/13855354235_887ae071c0_s.jpg"/> 
    </div> 
     <div class="logo"> 
      how to send an email in php code testing it 
    </div> 
     <div class="header-right"> 
      RIGHT 
    </div> 
    <div id="clear"> </div> 
</div> 

差不多我有3個div的，而最後一個div中有2周較小的div。如果有人能幫助我，我會遇到麻煩。

編輯：設置寬度自動的一個快速問題。

如何設置藍色來填充maininfo div的剩餘寬度？這是我的jsfiddle.net/4ykf5frk/2，我嘗試設置寬度：汽車

Answer 1

請檢查根據您的第一個代碼此更新例如：

.tutlist { 
 
    width: 500px; 
 
    height: 75px; 
 
    padding: 5px; 
 
    background-color: #dddddd; 
 
    margin: 40px; 
 
    /*margin not required*/ 
 
} 
 
.tutlist div {} .left { 
 
    width: 75px; 
 
    float: left; 
 
    height: 100%; 
 
    display: inline; 
 
} 
 
.middle { 
 
    width: 290px; 
 
    height: 100%; 
 
    display: inline-block; 
 
    background-color: #ff0000; 
 
    -webkit-border-radius: 12px; 
 
    -moz-border-radius: 12px; 
 
    border-radius: 12px; 
 
    margin: 0 5px; 
 
} 
 
.right { 
 
    width: 120px; 
 
    float: right; 
 
    height: 100%; 
 
    display: inline-block; 
 
} 
 
.right_top { 
 
    height: 34px; 
 
    display: inline-block; 
 
    background: red; 
 
    margin-bottom: 5px; 
 
    width: 100%; 
 
    -webkit-border-radius: 8px; 
 
    -moz-border-radius: 8px; 
 
    border-radius: 8px; 
 
} 
 
.right_bottom { 
 
    height: 34px; 
 
    display: inline-block; 
 
    background: grey; 
 
    width: 100%; 
 
    -webkit-border-radius: 8px; 
 
    -moz-border-radius: 8px; 
 
    border-radius: 8px; 
 
}

<div class="tutlist"> 
 
    <div class="left"> 
 
    <img src="https://c2.staticflickr.com/4/3726/13855354235_887ae071c0_s.jpg" /> 
 
    </div> 
 
    <div class="middle">how to send an email in php code testing it</div> 
 
    <div class="right"> 
 
    <div class="right_top">test</div> 
 
    <div class="right_bottom">double 
 
    </div> 
 
    </div> 
 
</div>

你必須使用 border-radius設置圓角。

希望這有助於

Answer 2

爲了使您的生活更輕鬆，連續3周設置的div。然後，在第三個裏面，你設置了那些較小的兩個div。

只是提示：要使內聯div的高度相同，請將它們設置爲display:table-cell。此外，您可以設置垂直對齊......

.left, .middle, .right { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border: 1px solid red; 
 
    padding: 5px; 
 
} 
 

 
.right-top, .right-bottom { 
 
    border: 1px solid blue; 
 
    padding: 5px; 
 
}

<div class='left'> 
 
    content 1 
 
</div> 
 

 
<div class='middle'> 
 
    content 2 
 
</div> 
 

 
<div class='right'> 
 
    <div class='right-top'> 
 
     content 3 
 
    </div> 
 
    <div class='right-bottom'> 
 
     content 4 
 
    </div> 
 
</div>

Answer 3

你可以找到一個很好的例子here。

CSS：

.container{ 
    width:100%; 
} 
.left { 
    width:25%; 
    height:100px; 
    background-color: red; 
    float:left; 
} 
.middle { 
    width:50%; 
    height:100px; 
    background-color: blue; 
    float:left; 
} 
.right { 
    width:25%; 
    height:100px; 
    float:left; 
} 

.right1{ 
    height:50px; 
    background-color: green; 
} 
.right2{ 
    height:50px; 
    background-color: purple; 
} 

HTML：

<div class="container"> 
    <div class="left"></div> 
    <div class="middle"></div> 
    <div class="right"> 
     <div class="right1"></div> 
     <div class="right2"></div>  
    </div> 
</div> 

Answer 4

試試這個

* { 
 
    outline: 1px solid red; 
 
} 
 

 
.container { 
 
    overflow: hidden; 
 
} 
 
.right { 
 
    float: right; 
 
    width: 100px; 
 
} 
 
.left { 
 
    float: left; 
 
    width: 100px; 
 
} 
 
.middle { 
 
    margin: 0 100px; 
 
}

<div class=container> 
 
    <div class=right> 
 
     <div class="right1">right1 inside</div> 
 
     <div class="right2">right2 inside</div> 
 
    </div> 
 
    <div class=left> 
 
     <img src="https://c2.staticflickr.com/4/3726/13855354235_887ae071c0_s.jpg"/> 
 
    </div> 
 
    <div class=middle> 
 
     Put text here Put text herePut text herevPut text herePut text herePut text herePut text herePut text herePut text herePut text herePut text herePut text herePut text herePut text herePut text here Put text herePut text herevPut text herePut text herePut text herePut text here 
 
    </div> 
 
</div>