無法將多個div水平堆疊在一起而不浮動？

-3

我最近意識到我們不能在容器內水平對齊多個div - 沒有它們之間的空間，也沒有使用float。無法將多個div水平堆疊在一起而不浮動？

我將inline-block應用於容器元素中的div，並給他們width的%。但似乎有一些額外的空間。我知道這是因爲隱藏的角色。請參閱下圖像 - 紅線是容器的

我想用inline-block，使它象下面的圖片，並採取了容器的整個寬度。我不能將flexbox用於父級，因爲我想讓它響應並在斷點後隱藏/重新定位某些元素。我也不想使用浮動，因爲它將外部div拉出並使容器元素無用。另外，刪除空格和製表符以使其工作是沒有意義的......在那裏輸入代碼會很麻煩。

現在來吧CSS，必須有東西。它不應該是令人沮喪的，CSS不應該是這個愚蠢的。

這裏是我的代碼，

.container{ 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 

 
.section{ 
 
\t display: inline-block; 
 
} 
 

 
.homebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #222; 
 
} 
 
.content{ 
 
\t width: 50%; 
 
\t min-width: 500px; 
 
\t height: 600px; 
 
\t background-color: #fbfbfb; 
 
} 
 
.sidebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #158; 
 
}

<div class="container"> 
 

 
<!-- Home/Menu Bar--> 
 
<div class="section homebar"> 
 

 
</div> 
 

 
<!-- Content Area --> 
 
<div class="section content"> 
 

 
</div> 
 

 
<!-- Sidebar Area --> 
 
<div class="section sidebar"> 
 

 
</div> 
 

 
</div>

來源

2016-11-30 Abhishek Pathak

只需刪除'div'之間的空格。 –

http://stackoverflow.com/q/5078239/483779 – Stickers

@PraveenKumar這是我不想做的事......我看到了這些答案。安排代碼將會非常困難。我無法用笨拙的格式編碼 –

我遇到了這個問題，最近和我發現了什麼是使用inline-block的時候對齊的div。由於字體大小，瀏覽器HTML會自動在每個div區塊的右側添加默認邊距。我在我的場景中找到的唯一解決方案是通過在div上添加-4px（由瀏覽器使用的默認空間，由於缺省字體大小）的右邊距修正來加入div，我們的樣式爲display:inline-block;。

所以，只需將margin-right:-4px;添加到您的.section課程中即可。

你也可以在.container類上使用font-size:0px;來達到這個效果，但這會迫使你重置容器內每個元素的字體大小，所以這就是爲什麼我使用了margin調整解決方案。

希望這會有所幫助。

來源

2016-11-30 14:25:38

要元素之間remove space其放置爲inline-block，設置font-size:0px在parent div或第二個選項標記使用的negative margin如下，

#container{ 
 
    width:100%; 
 
    height:auto; 
 
    overflow:hidden; 
 
    border:2px solid red; 
 
    font-size:0px; 
 
} 
 
#container > .homebar{ 
 
width:33.2%; 
 
height:200px; 
 
display:inline-block; 
 
background:yellow; 
 
} 
 
#container > .content{ 
 
width:33.3%; 
 
height:200px; 
 
display:inline-block; 
 
background:green; 
 
} 
 
#container > .sidebar{ 
 
width:33.3%; 
 
height:200px; 
 
display:inline-block; 
 
background:blue; 
 
}

<div id="container"> 
 
<!-- Home/Menu Bar--> 
 
<div class="section homebar"> 
 
</div> 
 
<!-- Content Area --> 
 
<div class="section content"> 
 
</div> 
 
<!-- Sidebar Area --> 
 
<div class="section sidebar"> 
 
</div> 
 
</div>

來源

2016-11-30 14:26:18 frnt

你之所以得到這些差距因爲div的字體大小。請注意解決方案：

div { 
 
    border: 1px solid black; 
 
    font-size: 0; 
 
} 
 

 
.container{ 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 

 
.section{ 
 
\t display: inline-block; 
 
} 
 

 
.homebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #222; 
 
} 
 
.content{ 
 
\t width: 50%; 
 
\t min-width: 500px; 
 
\t height: 600px; 
 
\t background-color: #fbfbfb; 
 
} 
 
.sidebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #158; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="container"> 
 

 
<!-- Home/Menu Bar--> 
 
<div class="section homebar"> 
 

 
</div> 
 

 
<!-- Content Area --> 
 
<div class="section content"> 
 

 
</div> 
 

 
<!-- Sidebar Area --> 
 
<div class="section sidebar"> 
 

 
</div> 
 

 
</div 
 
</body> 
 
</html>

基本上，我總是用normalize在我的網頁，以解決從一開始的問題。

來源

2016-11-30 14:27:04 Chen

無法將多個div水平堆疊在一起而不浮動？

回答

相關問題