Question

我试图让这个div响应并且为了尽可能地平滑我想要使它垂直对齐而不是水平对齐，我的意思是当浏览器调整大小时图像堆叠在内容的顶部而不是旁边。

 <div id="wrapper">
      <div id="first"><img id="dailyimage" class="alignnone size-thumbnail wp-image-14" src="http://css-     ig.net/png-test-corpus-images/04-c2-filtered.png" alt="wolves" width="200" height="200" /></div>
     <div id="second">
      <h4>TEST</h4>
      When you post a new question, other users will almost immediately see it and try to provide good answers. This often happens in a matter of minutes, so be sure to check back frequently when your                           question is still new for the best response.

    </div>
</div>


#wrapper {
    width: 100%;
    margin-bottom: 10px;
    height:200px;
    overflow:hidden;
    background-color: #ffffff;
    display: flex;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* all latest browser */
   -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* Firefox older version*/
   -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); 
}
#first {
    width: 200px;
    height:200px;
    flex-grow: 0;
    flex-shrink: 0;
}
#second {
  width:100%;
  height:200px;
  padding: 40px;
}

Answer 1

你可以这样做http://jsfiddle.net/47qeqh7x/4/

使用媒体查询

@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation: portrait) {
    #first {
        width: 100%;
        clear: both;
        text-align: center;
    }
    #second{
        width: auto;
    }
    #wrapper {    
        display: block;
        height:auto;
    }
}

Div从水平对齐到垂直对齐以获得响应

1 个答案: