在主 div 内滚动浮动 div

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;
        }