Question

我有一个div，其中包含我页面中间的菜单。我的问题是要做出响应。我的想法是水平旋转但仍然按钮进入它工作。所以这样就会有回应。

这是我的css代码：

 .content .middle-content{
        text-align: center;
    }
    .content .middle-content .prev{
        margin-bottom: 50px;
        margin-top: 5px;
    }
    .content .middle-content .icon{
        margin-bottom: 15px;
        margin-top: 15px;
    }
    .content .middle-content .next{
        margin-bottom: 15px;
        margin-top: 50px;
    }

和我的HTML代码：

<div class="col-md-2">
        <div class="middle-content"> 
            <hr class="vertical-line-top">
            <div class="prev">
                <a style="cursor:pointer;" id="prev">
                <img src="img/icon-01.png"   >
                </a>
            </div>
            <div class="icon gif">
                <a href="#"  id="info1">
                <img src="img/icon-02.png" >
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info2">
                <img src="img/icon-03.png">
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info3">
                <img src="img/icon-04.png">
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info4">
                <img src="img/icon-05.png">
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info5">
                <img src="img/icon-06.png">
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info6">
                <img src="img/icon-07.png">
                </a>
            </div>
            <div class="icon">
                <a href="#" id="info7">
                <img src="img/icon-08.png">
                </a>
            </div>            
            <div class="icon">
                <a href="#" id="info8">
                <img src="img/icon-09.png">
                </a>
            </div>
            <div class="next" >
                <a style="cursor:pointer;" id="next">
                <img src="img/icon-10.png">
                </a>
            </div>
            <hr class="vertical-line-bottom">
        </div>
    </div>

我附上了一个jsfiddle只是为了给出它一般的外观，它们是三个div，包含一个图片和一些文本，中间div和右边。

任何人都可以帮助我做出反应，我试过但没有机会吗？ DEMO

Answer 1

我们需要查看更多代码才能在您的网站中重现它，但是根据您提供的代码，您可以设置媒体查询，然后将元素浮动：

    @media (max-width: 400px){
.icon, .next, .prev{float: left;}       

    }

请参阅小提琴：https://jsfiddle.net/ff0k9j45/2/

旋转div以使其成为resposive

1 个答案: