通过将元素分成两行来使 div 具有响应性

Question

我有一个 div，在我的页面中间包含一个带有 8 个按钮的菜单。我的问题是 responsive.My 的想法是水平旋转它并分成两行，每行 row/line 包含 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

Answer 1

您可以在所有 "icon" div 上使用一个 class 而不是两个，然后：

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

JSfiddle Demo

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

通过将元素分成两行来使 div 具有响应性

make a div responsive by breaking its elements in two lines

html

css

css-float

responsive-design