通过将其元素分成两行来使 div 响应答案

【问题标题】：make a div responsive by breaking its elements in two lines通过将其元素分成两行来使 div 响应
【发布时间】：2016-01-18 21:12:15
【问题描述】：

我有一个 div，其中包含一个菜单，页面中间有 8 个按钮。我的问题是让它具有响应性。我的想法是水平旋转它并分成两行，每行/行包含 4 个按钮。我绑成这样：

@media (max-width: 767px){
    .icon1{float: left; margin-left: 25px; margin-bottom: 50px;}
    .icon2{float: left; margin-left: 25px; margin-top: 50px;}
     }

这是我的css代码：

  .content .middle-content{
    text-align: center;
    }

.content .middle-content .icon1{
    margin-bottom: 15px;
    margin-top: 15px;
}
.content .middle-content .icon2{
    margin-bottom: 15px;
    margin-top: 15px;
}

和我的html代码：

<div class="col-md-2">
        <div class="middle-content"> 
            <div class="icon1">
                <img src="img/clock.png">
            </div>
            <div class="icon1">
                <img src="img/clock.png">
            </div>
            <div class="icon1">
                <img src="img/clock.png">
            </div>
            <div class="icon1">
                <img src="img/clock.png">
            </div>
            <div class="icon2">
                <img src="img/clock.png">
            </div>
            <div class="icon2">
                <img src="img/clock.png">
            </div>
            <div class="icon2">
                <img src="img/clock.png">
            </div>
            <div class="icon2">
                <img src="img/clock.png">
            </div>
        </div>
    </div>

我创建了一个 jsfiddle 只是为了说明它的总体外观，左边三个 div 是一些文本，中间 div 有这些按钮，右边一个也有文本。

谁能帮我让它响应并把按钮分成两行？ DEMO

【问题讨论】：

标签： html css responsive-design css-float

【解决方案1】：

您可以在所有“图标” div 上使用一个类，而不是两个，然后：

@media screen and (max-width: 767px) {
    .icon1 {
        float: left;
        width: 25%;
    }

JSfiddle Demo

【讨论】：

如果您有时间回答另一个问题：使用 margin-bottom: 50px;边距顶部：50px；没有效果为什么会这样？
在小屏幕上，我想在带有这些按钮的 div 和下方和上方的 div 之间留出一个空间。使用：margin-bottom：50px；边距顶部：50px；没有效果！

【解决方案2】：

   <style>
    .top, .bottom{clear:both;}
    .icon1, .icon2{float: left; margin:10px 0 10px 20px; }
    </style>
    <div class="col-md-2">
            <div class="middle-content">
                <div class="top"> 
                <div class="icon1">
                    <img src="img/clock.png">
                </div>
                <div class="icon1">
                    <img src="img/clock.png">
                </div>
                <div class="icon1">
                    <img src="img/clock.png">
                </div>
                <div class="icon1">
                    <img src="img/clock.png">
                </div>
                </div>
                <div class="bottom">
                <div class="icon2">
                    <img src="img/clock.png">
                </div>
                <div class="icon2">
                    <img src="img/clock.png">
                </div>
                <div class="icon2">
                    <img src="img/clock.png">
                </div>
                <div class="icon2">
                    <img src="img/clock.png">
                </div>
            </div>
            </div>
        </div>

【讨论】：