防止Div的向下堆疊

如果你拿這個頁面並減小瀏覽器窗口的寬度，那麼並排顯示而不是並排顯示的div將會彼此疊加。我也試過顯示：內聯塊。我希望它強制瀏覽器在底部顯示滾動條，並保留div的位置，以便您必須從左向右滾動以查看所有內容。我嘗試添加一個具有設置高度的容器div，以防止發生這種情況，但這不起作用。防止Div的向下堆疊

#maincontainer { 
 
\t width: 1200px; 
 
\t height: 500px; 
 
} 
 
    
 

 
#left { 
 
    width: 400px; 
 
    height: 500px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: black; 
 
    float: left; 
 
} 
 
    
 
#middle { 
 
    width: 400px; 
 
    height: 500px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: black; 
 
    float: left;  
 
} 
 
    
 
#right { 
 
    width: 400px; 
 
    height: 500px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: black; 
 
    float: left; 
 
}

<html> 
 
    <link rel="stylesheet" type="text/css" href="teststyle.css"> 
 
    <body> 
 
     <div id = 'maincontainer'> 
 
      <div id = 'left'></div> 
 
      <div id = 'middle'></div> 
 
      <div id = 'right'></div> 
 
     </div> 
 
    </body> 
 
</html>

來源

2017-07-27 Fingers

因爲邊界。由於邊界，每個正方形的寬度都是有效的402px。如果你添加這個css規則：* {box-sizing:border-box; }你會得到想要的效果。如果基於你的CSS

https://jsfiddle.net/2jwzrzv1/1/

來源

2017-07-27 18:05:54 Varin

這解決了這個問題，但仍不清楚爲什麼有效地增加div的寬度2px會改變堆疊行爲。非常感謝。 – Fingers

@Fingers你擁有的容器是1200px，所以402px乘以3，意味着你只是超過1200px，在1206px，這使得第三個div浮動到下一行微小的一點。 –

因爲你給容器1200px的寬度和3個divs有402px的寬度。 402 x 3 = 1206 :) 這是自然的行爲。如果你想要矩形響應，使它們的寬度爲33％，這樣它們應該總是容器的1/3。 – Varin

的原因是因爲你使用的像素指定的<div>寬度。基本上告訴瀏覽器的是，無論窗口的寬度是多少，都希望它成爲這個特定的大小。這會自然導致<div>堆棧，因爲它們保持其大小。

如果你想不管瀏覽器的寬度是多少，你需要使用百分比合計100％，這取決於你想保留的數量<div>並排側。

在你的情況下，CSS將是：

#left { 
    width: 33%; 
    height: 500px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: black; 
    float: left; 
} 

#middle { 
    width: 33%; 
    height: 500px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: black; 
    float: left; 
} 

#right { 
    width: 33%; 
    height: 500px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: black; 
    float: left; 
}

來源

2017-07-27 18:04:52

的行爲是正確的。有一個你想做的小調整可以解決這個問題。使用box-sizing，以便邊框在框內而不是外邊計數。

因此，對於您的內部div，請使用box-sizing: border-box;。這裏有一個工作示例：https://codepen.io/usmanity/pen/YxyyKY

來源

2017-07-27 18:06:23

在這種情況下我使用Flex容器，基本上如果你這樣做：

#maincontainer { 
    width: 1200px; 
    height: 500px; 
    display: flex; 
    flex-direction: row; 
}

這樣所有的容器內的元素接下來將放置，彼此會盡可能地保持這種佈局。

還有一些關於柔性集裝箱的其他功能，比如訂單，對齊，這對操作定位非常有用。

希望得到這個幫助！

來源

2017-07-27 18:06:52 capote

嘗試使用浮動或如果你想滾動條，你可以去溢出。 https://www.w3schools.com/css/css_overflow.asp

來源

2017-07-27 18:13:13

您需要添加一個固定寬度的容器和一組主容器寬度自動和使用滾動-X：我添加6個像素的固定寬度容器

<div id = 'maincontainer'> 
    <div id="fix-width-container"> 
     <div id = 'left'></div> 
     <div id = 'middle'></div> 
     <div id = 'right'></div> 
    </div> 
</div> 

<style> 
    #fix-width-container { 
     width: 1206px; 
     height: 520px; 

    } 

    #maincontainer { 
     overflow-y: hidden; 
     overflow-x: scroll; 


    } 

    #left { 
     width: 400px; 
     height: 500px; 
     border-style: solid; 
     border-width: 1px; 
     border-color: black; 
     float: left; 

    } 

    #middle { 
     width: 400px; 
     height: 500px; 
     border-style: solid; 
     border-width: 1px; 
     border-color: black; 
     float: left; 


    } 

    #right { 
     width: 400px; 
     height: 500px; 
     border-style: solid; 
     border-width: 1px; 
     border-color: black; 
     float: left; 

    } 
</style>

通知持有的邊界，我假設你爲了調試目的而添加了它們。

來源

2017-07-27 18:15:02

防止Div的向下堆疊

回答

相關問題