Question

我正在研究响应式设计。我有div（WebPage_NavigationWrapper），里面有浮动左div（function_block）。现在我想滚动条，以防浮动div不能单行调整;意思是主div高度保持不变。由于响应式设计我没有使用PX所以我相信我不提供div的高度，除非我错了！

 <div id="WebPage_NavigationWrapper" class="TitleHeaderBar_Style_L2">

        <div class="function_block">
            <a href="#" class="CreateNewEntry_Icon Hyperlink_Text" onclick="load_CreateNewAward_page()">New-Award</a>
        </div>

        <div class="function_block">
            <a href="#" class="CreateNewEntry_Icon Hyperlink_Text" onclick="load_CreateNewAward_page()">New-Award</a>
        </div>

        <div class="function_block">
            <a href="#" class="CreateNewEntry_Icon Hyperlink_Text" onclick="load_CreateNewAward_page()">New-Award</a>
        </div>

        <div class="function_block">
            <a href="#" class="CreateNewEntry_Icon Hyperlink_Text" onclick="load_CreateNewAward_page()">New-Award</a>
        </div>

    </div>
 </div>

CSS

#WebPage_NavigationWrapper{
 display: table;
 table-layout: fixed;
 width:100%;
 padding:10px;
 overflow-x: scroll;
}

.function_block{
float:left;
padding:2px;
width:120px;
height:60px;
}

.function_block:hover{
  background-color:#CDE5F2;
}


.CreateNewEntry_Icon{ 
  margin-left:10px;
  width:85px;
  line-height:5;
  display:inline-block;
  background:url("../ImagesAndIcons/Icons/Add_New.png") no-repeat top center;
 }

Answer 1

我认为这会对你有帮助，用以下

替换您的代码

         #WebPage_NavigationWrapper{
             width:400px;
             height: 100px;
             padding:10px;
             overflow-x: scroll;
             overflow-y: hidden;
             border: 1px solid black;
        }

        .function_block{
             display: table-cell;
             padding:2px;
             width:120px;
             height:60px;
        }

在主div中滚动浮动div

CSS

1 个答案: