不需要的行縮進css

我的列表中有一個不需要的空間。代碼如下，但我有大約8行3列列表，但最後一行第一列表項導致不需要的空間。幾乎看起來它完全移動到下一列，沒有任何東西在它的位置。不知道爲什麼。除了最後一行，列表工作正常。任何幫助？不需要的行縮進css

HTML

<div id="museums" class="clearfix"> 

     <div class="entry"> 
      <p>The Art Institute of Chicago</p> 
      <p>Art</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/2/edit">Edit</a><br /> 
       <a href="/museums/2" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/2">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>The Field Museum</p> 
      <p>Natural History</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/3/edit">Edit</a><br /> 
       <a href="/museums/3" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/3">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Museum of Contemporary Art</p> 
      <p>Art</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/4/edit">Edit</a><br /> 
       <a href="/museums/4" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/4">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Museum of Science and Industry</p> 
      <p>Science and Technology</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/5/edit">Edit</a><br /> 
       <a href="/museums/5" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/5">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Adler Planetarium</p> 
      <p>Universe</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/6/edit">Edit</a><br /> 
       <a href="/museums/6" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/6">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>The Chicago History Museum</p> 
      <p>History</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/7/edit">Edit</a><br /> 
       <a href="/museums/7" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/7">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Museum of Broadcast Communications</p> 
      <p>Radio and Television</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/8/edit">Edit</a><br /> 
       <a href="/museums/8" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/8">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>The Shedd Aquarium</p> 
      <p>Marine Life</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/9/edit">Edit</a><br /> 
       <a href="/museums/9" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/9">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>The Notebaert Nature Museum</p> 
      <p>Nature</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/10/edit">Edit</a><br /> 
       <a href="/museums/10" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/10">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>DuSable Museum of African American History</p> 
      <p>African American History</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/11/edit">Edit</a><br /> 
       <a href="/museums/11" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/11">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Frank Lloyd Wright Home and Studio</p> 
      <p>Architecture</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/12/edit">Edit</a><br /> 
       <a href="/museums/12" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/12">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>National Museum of Mexican Art</p> 
      <p>Mexican Culture</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/13/edit">Edit</a><br /> 
       <a href="/museums/13" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/13">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Jane Addams Hull House Museum</p> 
      <p>Social Welfare </p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/14/edit">Edit</a><br /> 
       <a href="/museums/14" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/14">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Abraham Lincoln Museum</p> 
      <p>History</p> 
      <p>Chicago , 
      Illinois</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/15/edit">Edit</a><br /> 
       <a href="/museums/15" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/15">View</a> 
      </div> 
     </div> 
     <div class="entry"> 
      <p>Rebecca's Test Museum</p> 
      <p>Test</p> 
      <p>St. Paul, 
      Minnesota</p><br /> 

      <div class="edit"> 
      <!--JH - allow only logged in users to see edit and delete links--> 
       <a href="/museums/16/edit">Edit</a><br /> 
       <a href="/museums/16" data-confirm="Are you sure?" data-method="delete" rel="nofollow">Delete</a> 

      <br /> 
       <a href="/museums/16">View</a> 
      </div> 
     </div> 
</div>

CSS

div.entry { 
    position: relative; 
    width: 30%; 
    float: left; 
    margin: 0 30px 10px 0; 
    padding: 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 

} 

div.entry p:first-child { 
    width: 290px; 
    line-height: 1.2em; 
    font-size: 25px; 
    color: #E07951; 
    margin-bottom: 3px; 
    padding: 0px; 
} 

div.entry p:nth-child(2) { 
    font-size: 17px; 
} 

div.entry p { 
    font-size: 15px; 
    line-height: 1.4em; 
    margin: 0px; 
    margin-bottom: 3px; 
    padding: 0px; 
} 

.edit { 
    padding-top: 10px; 
}

來源

2012-03-03 Nerdysyntax

我在那裏看不到您的列或行嗎？你能給我們一個jsfiddle或其他網站的例子代碼？ – tkone 2012-03-03 23:47:52

發佈生成的HTML和所有CSS。 – j08691 2012-03-04 00:01:02

爲你製作了一個jsFiddle：http://jsfiddle.net/mQrnS/ – doctorless 2012-03-04 00:12:52

@d_r_w很好地解釋了漂浮物的問題。

您可以嘗試display: inline-block; vertical-align: top;在每個塊上。
Here is a fiddle

限制：

違反表或（更好）display: table-cell;，你的塊不會真的是相同的高度。在白色背景下，一切都很好，d_r_w描述的花車問題已消失，但如果您在每個框的周圍添加背景或邊框，則會看到它們各自具有其內容的高度。例如，您仍然可以添加比任何內容短的背景，例如前三行。
對於許多視口寬度，以px爲單位混合寬度和填充容易使3 div大於100％。 :(你最好只使用％（在小提琴部分完成）
inline-block將輸出空白的空間，因爲兩個span之間，也就是說，任何空白，如果你不希望這些〜4 PX（3 * 33.33％+ 3 * 4px> 100％寬度和badaboom，請參閱上文），您必須在每個div </div><div>之間添加HTML註釋或在模板中輸出NO空白，nil，nada（併爲您的註釋添加註釋爲什麼這就像做）的同事

其他的解決方案，將要求額外的DIV每行/列：display: table; /* and table-row and table-cell */
兼容性：IE8 +，並回到「inline-block的」爲IE6/7 （即display: inline; zoom: 1;等於這些舊瀏覽器上的內聯塊）

來源

2012-03-04 00:43:37 FelipeAls

我不得不說這是獲勝的答案。添加一個高度給了我每個列表底部的奇怪填充，但是這個技巧給了我相等的空間。謝謝 – Nerdysyntax 2012-03-04 00:58:52

這是由於的方式浮動元素工作。它根據您在HTML中的順序確定從左到右的順序，但倒數第二行的元素實際上比右側的元素長，所以當下一行出現時，它會將以下元素放在最合理（到瀏覽器）的位置中，該位置直接位於直接行的右下方。這導致最後一個項目出現，好像它是一個新行。

視覺上來說，這是發生：

+-+-+-+ 
|A|B|C| 
+-+-+-+ 
|D|E|F| 
| +-+-+ 
+-+G|H| 
|I+-+-+ 
+-+

短期使用min-height的有在典型的瀏覽環境有保證的長度，或者甚至table S，有沒有解決的好辦法（EW！）這在CSS中。

但是，有一個javascript解決方案。這是一個名爲Masonry的jQuery插件。我推薦它用於這種情況。

另外值得一提的是，無論可能有多少列（移動環境，寬屏幕顯示器等），砌體可以幫助列顯示保持一致。

來源

2012-03-04 00:19:31 doctorless

哇，這正是它的樣子。我嘗試了砌體，但由於某些原因，masonry.js不支持rails 3.1.3。那麼它有點，但不是在所有的瀏覽器和調整殺死它。我希望有一個CSS解決方案。 – Nerdysyntax 2012-03-04 00:28:43

奇怪的是，調整支持大小是默認選項。您是否有動態顯示在頁面上的新元素？有觸發重組的支持，但它必須綁定到您正在執行的任何事件（例如向您的收藏中添加項目）。 – doctorless 2012-03-04 00:32:57

我不知道。當它使用相同的腳本$（'＃museums'）。masonry（{itemSelector：'.entry'}）;,它可以工作。但是，當我調整大小時，只有一個列列表，這發生在其他瀏覽器上。 – Nerdysyntax 2012-03-04 00:45:29

這是浮動問題。

包含「DuSable美國黑人歷史博物館」的div比其他div更大。所以它從下一行推動divs。

兩件事情我們可以做

1）設置每個DIV 如固定高度：添加hegiht: 300px;或某事像，要div.entry

2）如果固定的高度是不可能的，再加入在HTML標記的每個第三個div之後的<div style="clear:both"></div>。

來源

2012-03-04 00:20:43

（1）的缺點在於，一個人的默認瀏覽器設置上的不同字體大小會嚴重影響元素的顯示方式。（2）唯一的缺點是屏幕尺寸縮小時不起作用。如果你有移動設備，只有兩列的空間，這仍然會面臨行不匹配問題。 – doctorless 2012-03-04 00:25:02

哇，所有這些只是浮動水平列表。吮吸閃光正在結束，這從來不是一個問題那裏大聲笑。 – Nerdysyntax 2012-03-04 00:32:33

增加了一個高度，它看起來很好，但我擔心它的缺點。 – Nerdysyntax 2012-03-04 00:46:36

不需要的行縮進css

回答

相關問題