用ng-repeat和inline-block div奇數對齊/頁邊距/間距

我是angularjs的新手，並且web開發已經不是我的專長，但我確實搜索了這個問題的答案並且找不到任何東西。我在顯示爲行內塊的div上使用了ng-repeat。我得到了奇怪的頂部和底部間距。我在這裏有一個截圖：https://www.dropbox.com/s/dt2jw4cyv609t5q/screenshot.png。用ng-repeat和inline-block div奇數對齊/頁邊距/間距

這是基礎HTML：

<html> 
<head> 
    <title>Knock Admin V1.0</title> 
    <script type="text/javascript" src="/assets/js/angular.js"></script> 
    <script type="text/javascript" src="/assets/js/angular-route.js"></script> 
    <script type="text/javascript" src="/assets/ng/admin/app.js"></script> 
    <link rel="stylesheet" type="text/css" href="/assets/ng/admin/css/style.css"> 
</head> 

<body ng-app="admin"> 
    <div id="sidebar"> 
     Welcome 
     <br><a href="/admin/logout">Logout</a> 
    </div> 

    <div id="view"> 
     <div ng-view></div> 
    </div> 
</body> 

</html>

和視圖模板：

<h3>My Locations</h3> 
<label for="filter">Filter:</label><input type="text" id="filter" ng-model="filter.input" /> 

<div id="locationCardCollection"> 
    <div class="locationCard" ng-repeat="loc in locations | filter:filter.input" > 
     {{ loc.chain.name }} - {{ loc.name }} <br> 
     {{ loc.message }} 
    </div> 
</div>

最後，在CSS：

body, div { 
    margin: 0; 
    padding: 0; 
} 

body{ 
    background-color: #E4E4E4; 
} 

#view { 
    padding: 10px; 
    margin-left: 200px; 
    overflow: hidden; 
} 

#sidebar { 
    position: fixed; 
    height: 100%; 
    width: 200px; 
    background-color: #555555; 
    color: #FFFFFF; 
} 

div.locationCard { 
    background: #FFFFFF; 
    display: inline-block; 
    height: 400px; 
    width: 300px; 
    margin: 10px; 
    -webkit-box-shadow: 5px 5px 10px 1px #404040; 
    box-shadow: 5px 5px 10px 1px #404040; 
} 

div.locationCard.hover { 
    background-color: #FF0000; 
}

我沒有做任何事情有貓膩格式化角度的應用程序代碼，所以我會離開它，除非另有要求。有人能幫我一下嗎？

謝謝！

來源

2014-02-20 Scott Crunkleton

如果您使用示例代碼設置了plnkr.co或jsfiddle.net頁面來重現問題，我可以查看一下。 – akonsu

我正在這樣做。看來，如果我拿走div中的{{loc.message}}內容，問題就會消失。內容是否超出div邊界可能會成爲問題嗎？ –

如果您將'overflow：hidden'添加到'locationCard'類，會發生什麼情況？ – akonsu

將overflow: hidden添加到locationCard CSS。

來源

2014-02-20 06:44:16

用ng-repeat和inline-block div奇數對齊/頁邊距/間距

回答

相關問題