Question

我有一行div，里面有图像，如下所示：

当我改变页面大小时，基本上它会在移动设备上看起来像div这样开始低于对方：

这太棒了，因为它正是我想要的。但我有另一行看起来像这样的div：

但是当我改变页面大小时，这组div不会像其他div一样落在彼此之下。它们只是被页面切断，所以基本上这些div不是移动响应。任何人都可以帮助我必须让第二组div像第一组一样响应吗？提前谢谢！

HTML：

<div class="row-fluid" id="extras">
    <div class="container-fluid">
        <div class="row-fluid flex">

            <div class="block text-center">
                <img src="http://mysite/wp-content/uploads/2016/05/socialmed.png" width="155" height="auto" max-width="100%"/>
            </div>

            <div class="block text-center">
                <ul class="aboutli">
                    <li><a target="_blank" href="http://mysite/information">About Us</a></li>
                    <li><a target="_blank" href="http://mysite/information">FAQ's</a></li>
                    <li><a target="_blank" href="http://mysite/information">Contact Us</a></li>
                    <li><a target="_blank" href="http://mysite/information">Work With Us</a></li>
                    <li><a target="_blank" href="http://mysite/information">Terms and Conditions</a></li>
                    <li><a target="_blank" href="http://mysite/information">Privacy Policy<br></a></li>
                    <li><a target="_blank" img src="http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png" href="https://www.drinkaware.co.uk/"><div id="drinkaware"></div></a></li>
                </ul>
            </div>

            <div class="block text-center">
                <div id="words">
                    <p class="become">become a driver</p>
                    <p class="driver-para">As an ever evolving new start up we'll constantly be looking for friendly drivers to join the team, so If you'd be interested in  join our team click the button below to see the available opportunities we have available.</p>
                    <input type="submit" id="driver-btn" value="FIND OUT MORE" onclick="location='http://mysite/join-the-team/'"/>
                </div>
            </div>

            <div class="block text-center">
                <img src="http://mysite/wp-content/uploads/2016/07/testimg.png" width="200" height="auto"/>
            </div>

        </div>
    </div>
</div>

CSS：

#extras {
    height: auto;
    width: 100%;
    overflow: hidden;
    background-color: #fff;
}
div.block {
  padding: 10px 50px 10px 50px;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
}
.flex {
  display: flex;
}
#words {
    width: 300px;
    height: auto;
}
#linksdrinks {
    margin-top: 70px;
    margin-right: 70px;
    width: 160px;
    height: 238px;
    display: inline-block;
    vertical-align: top;
}
ul.aboutli {
  color: #000000;
  font-size: 13px;
  margin: 0;
  text-decoration: none;
  list-style-type: none !important;
  line-height: 0.8cm;
}
#drinkaware {
    width: 156px;
    height: 50px;
    display:list-item;
    background-image: url('http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png');
    background-size: 150px auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    vertical-align: top;
    list-style-type: none !important;
}
#driver {
    margin-left: 70px;
    margin-right: 70px;
    padding: 5px;
    width: 300px;
    height: auto;
    display: inline-block;
}
.become {
    color: #a6a6a6;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
.driver-para {
    font-size: 13px;
}
#driver-btn {
    color: #fd0e35;
    font-size: 11px;
    font-weight: bold;
    text-shadow: none;
    padding: 7px;
    background-color: #fff;
    border: 2px solid #fd0e35;
    box-shadow: none;
    border-radius: 4px;
    outline: none;
}
#driver-btn:hover {
    color: #fff;
    background-color: #fd0e35;
}
#open24 {
    display: inline-block;
    width: 200px;
    height: auto;
    background-image: url('http://mysite/wp-content/uploads/2016/04/open247.png');
    background-size: 250px auto;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
}

Answer 1

你可以试试这个

@media screen and (max-width:767px){
  .flex {
    display: block;
  }
}

Answer 2

尝试使用此代码。在媒体查询中写下你的css

@media (min-width:767px) {
div.block {
  padding: 10px 50px 10px 50px;
  display: inline-flex;
  justify-content: center;
  flex-direction: column;
}
.flex {
  display: flex;
}
}

Answer 3

您可以尝试以下代码。

.flex {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

Answer 4

此外，对于跨浏览器支持display: inline-flex;现在是display: flex;

务必使用

http://autoprefixer.github.io/

如何通过页面响应使这些div在彼此之下移动？

4 个答案: