Question

我有一个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

Answer 1

您可以在所有＆＃34;图标＆＃34;上使用单个课程。 div而不是两个然后：

@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响应

2 个答案: