4个div，最后一行双重堆叠在另一个div内

Question

我想要完成的是这个

我目前正在研究它并且无法正确使用它，我开始尝试这样做的两个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。如果有人可以帮助我，我会遇到麻烦。

编辑：设置宽度自动的一个快速问题。

如何设置蓝色以填充while maininfo div的剩余宽度？这是我的jsfiddle.net/4ykf5frk/2，我尝试设置宽度：自动

Answer 1

请根据您的第一个代码检查此更新示例：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13; 您必须使用border-radius来设置圆角。

希望这有帮助

Answer 2

试试这个http://jsfiddle.net/csdtesting/22YBU/735

＆＃13;

＆＃13;

* {
    outline: 1px solid red;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

为了让您的生活更轻松，请连续设置3个div。然后，在第三个内部，你设置那些较小的两个div。

只是提示：要使内联div的高度相同，请将它们设置为display:table-cell。另外，您可以设置垂直对齐...

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你可以找到一个很好的例子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>