Question

我想将<article>侧边栏放在#main { width: 58%; margin-left: 2%; float: left; } #sidebar { width: 34%; margin-left: 4%;` float: left; }主列下面（而不是旁边），以适应较小的屏幕（移动设备）。

如何在我的双列网站首页中实现它？

在桌面屏幕上，当前并排显示正常。只有在较小的屏幕旁边，块才会出现在文章块之下。

You can use following method to create separate views. 


    state('people.following',{
                    data:{
                          anyVar: {
                                    label: 'cp',
                                    text : 'anyText'
                                  }
                         },                     
                         views: {
                            'content@people': angularAMD.route({
                                template: infoView,
                                controller: 'custInfoCtrl',
                                controllerUrl: 'modules/custCtrl'
                            }),
                            'mobileView@people': angularAMD.route({
                                template: mobileView,
                                controller: 'mobileCtrl',
                                controllerUrl: 'modules/mobileBottomViewCtrl'
                            })
                        }
                    })

<pre>
 <div ui-view='contentArea'>   </div>    
  <div ui-view='mobileView'>    </div>  
</pre>

Answer 1

删除＆＃39;在#sidebar

Demo

    #sidebar {
   width: 34%;
   margin-left: 4%;
   float: left;
    }

Answer 2

尝试使用@media和width: 100%;：

这里是JsFiddle link demo。

例如小屏幕尺寸：767px

@media (max-width: 767px) {
     #sidebar,
     #main {
        width: 100%;
        margin-left: 0;
    }
}

希望它有所帮助。

Answer 3

<div id="missioncontainer" class="missioncontent">
    <div id="mission-{{mission.id}}" class="contentBox box effectmission" ng-repeat="mission in missions">
        <div class="boxheader">
            <div style="float:right; clear:right; width:20%;">
                <span><a href="" style="" ng-click="deleteMission(mission.id)"><img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a></span>
            </div>
            <span style="font-size: large; font-family: monospace; font-weight: bold;">EDIT MISSION NAME</span>
            <input ng-blur="updatemission(mission.id, mission.missionInfo)" type="text" ng-model="mission.missionInfo" class="form-control" style="background-color: #e8e8e8">
        </div>
        <div style="padding-top: 10px;">
            <span style="font-size: large; font-family: monospace; font-weight: bold; margin-left:5%;">EDIT MISSION POINTS</span>
            <br />
        </div>
        <div style="padding-top: 10px;">
            <ul id="beforeul" style="float: left; width: 100%;">
                <li ng-repeat="missioncontent in mission.missioncontent" style="padding: 2px; width: 100%;">
                    <div style="float:right; clear:right; width:20%;">
                        <span><a href="" style="" ng-click="deletemissionpoints(missioncontent.id, mission.id)"><img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a></span>
                    </div>
                    <div>
                        <input id="{{missioncontent.id}}" type="text" ng-model="missioncontent.info" ng-blur="updatemissionpoints(missioncontent.id, missioncontent.info)" class="form-control" style="background-color: #e8e8e8; width: 80%;">
                    </div>
                </li>
            </ul>
        </div>
        <div style="padding-top: 35px;">
            <a href="" ng-click="addmissionpoint(mission.id)"><img id="addmissionpoint" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"></a>
        </div>
    </div>
</div>

如何将<aside>块放在<article>块下面而不是它旁边

3 个答案: