防止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的向下堆叠

回答

相关问题