如何用响应式包装div元素框

Question

如何将div框包含到主div中以及具有响应性的图像。 我试图实现以下布局。

当我使用float:left时，如果我使用显示内联块，那么框就会完美对齐，如果没有它，则框不会如下所示对齐。

My jfiddle

.mywrapper {
	    margin: 0 auto;
	    min-width: 320px;
	    max-width: 905px;
	    background: yellow;
	    
	}
	
.firstblock {
		margin-top: 60px;
	    margin-bottom: 60px;	    
	    background: red;
	    //background: #2b2b2b;
	    padding:30px;
	    width:auto;
		height:auto;
	    
	}


	
.mainimage{
	width: 190px;
	height: 125px;
	margin-left:2%;
	float:left; 
	padding-right:30px;
}

.smallbox{
	float: left;
    width: 190px;
    height: 110px;
    background-color: green;
    margin-right:10px;
    
}

.secondblock {
	    margin-bottom: 30px;
	    height: 215px;
	    background: aqua;
	    padding:30px;
}

<div class="mywrapper" id="myid">
    Hello
	<div class="firstblock">
	<div >
			<img class="mainimage" src="mainimg.JPG" border="0" />
		</div>
		<div>			
			<h2 class="title"><span>MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT</span></h2>		
			<div class="smallbox"><img class="pcspecimg" src="box1.JPG" alt="box1.JPG" border="0" /><span>box1</span><div>MY TEXT</div></div>
			<div class="smallbox"><img class="pcspecimg" src="box2.JPG" alt="box2.JPG" border="0" /><span>box2</span><div>MY TEXT MY TEXT</div></div>
			<div class="smallbox"><img class="pcspecimg" src="box3.JPG" alt="box3.JPG" border="0" /><span>box3</span><div>MY TEXT MY TEXT</div></div>
					
		</div>
	</div>
	
	
	<div class="secondblock">
	secondblock
	</div>	
	</div>

Answer 1

我想你想要这个

.mywrapper {
  margin: 0 auto;
  min-width: 320px;
  max-width: 905px;
  background: yellow;
}
.firstblock {
  margin-top: 60px;
  margin-bottom: 60px;	    
  background: red;
  //background: #2b2b2b;
  padding:30px;
  width:auto;
  height:auto;
}
.left-div{
  float:left;
  width: 27%;
  height: 125px;
  margin-right:2%;
  border: 1px solid;
}
.right-div{
  float:right;
  width:70%;
}
h2{
  margin-top:0;
}
.clear{
  clear:both;
}
img{
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.pcspecimg {
  border: 1px solid #fff;
  float: left;
  height: 40px;
  margin-right: 3%;
  width: 27%;
}
.small-wrap {
  margin-bottom: 5px;
}
.smallbox {
  background-color: green;
  float: left;
  height: 110px;
  margin-right: 1.5%;
  width: 32.3%;
  padding:5px;
  box-sizing: border-box;
}
.smallbox:last-child{
  margin-right:0;
}
.secondblock {
  margin-bottom: 30px;
  height: 215px;
  background: aqua;
  padding:30px;
}

<div class="mywrapper" id="myid">
    Hello
    <div class="firstblock">
    <div class="left-div">
      <img class="mainimage" src="mainimg.JPG" border="0" />
    </div>
    <div class="right-div">			
      <h2 class="title">
        <span>MY TEXT MY TEXT</span>
      </h2>		
      <div class="smallbox">
        <div class="small-wrap">
          <div class="pcspecimg">
            <img src="box1.JPG" alt="box1" border="0" />
          </div>
          <span>box1</span>
          <div class="clear"></div>
        </div>
        <div>MY TEXT</div>
      </div>
     <div class="smallbox">
        <div class="small-wrap">
          <div class="pcspecimg">
            <img src="box1.JPG" alt="box1" border="0" />
          </div>
          <span>box1</span>
          <div class="clear"></div>
        </div>
        <div>MY TEXT</div>
      </div>
      <div class="smallbox">
        <div class="small-wrap">
          <div class="pcspecimg">
            <img src="box1.JPG" alt="box1" border="0" />
          </div>
          <span>box1</span>
          <div class="clear"></div>
        </div>
        <div>MY TEXT</div>
      </div>					
    </div>
    <div class="clear"></div>
  </div>
  <div class="secondblock">
    secondblock
  </div>	
</div>

Answer 2

＆＃13;

＆＃13;

.mywrapper {
	    margin: 0 auto;
	    min-width: 320px;
	    max-width: 905px;
	    background: yellow;
	    
	}
	
.firstblock {
  display: flex;
  flex-direction: row;
		margin-top: 60px;
	    margin-bottom: 60px;	    
	    background: red;
	    //background: #2b2b2b;
	    padding:30px;
	    width:auto;
		height:auto;
	    
	}


	
.mainimage{
	width: 190px;
	height: 125px;
	margin-left:2%;
	float:left; 
	padding-right:30px;
}

.smallbox{
	float: left;
    width: 190px;
    height: 110px;
    background-color: green;
    margin-right:10px;
    
}

.secondblock {
	    margin-bottom: 30px;
	    height: 215px;
	    background: aqua;
	    padding:30px;
}

＆＃13;

<div class="mywrapper" id="myid">
    Hello
  <div class="firstblock">
    <div>
        <img class="mainimage" src="mainimg.JPG" border="0" />
    </div>
    <div>			
      <h2 class="title"><span>MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT MY TEXT</span></h2>		
      <div class="smallbox"><img class="pcspecimg" src="box1.JPG" alt="box1.JPG" border="0" />                      <span>box1</span><div>MY TEXT</div>
      </div>
      <div class="smallbox"><img class="pcspecimg" src="box2.JPG" alt="box2.JPG" border="0" />                      <span>box2</span><div>MY TEXT MY TEXT</div>
      </div>
      <div class="smallbox"><img class="pcspecimg" src="box3.JPG" alt="box3.JPG" border="0" />                       <span>box3</span><div>MY TEXT MY TEXT</div>
      </div>
    </div>
	</div>
  <div class="secondblock">
    secondblock
  </div>	
</div>

＆＃13;

＆＃13;

＆＃13;

你想要吗？

你能解释一下细节吗？