当浏览器窗口大小缩小时的div换行

这可能是我第一次尝试在线提问有关CSS或HTML的问题，但作为标题说明我遇到div在彼此之间崩溃的问题时浏览器窗口的大小会缩小（不是全屏的浏览器窗口）。当浏览器窗口大小缩小时的div换行

div的设置为一个3格的div，围绕3个水平布置在屏幕上。我希望浏览器显示一个水平滚动条，如果窗口不再大到足以水平显示所有内容，而是让窗口像现在一样崩溃。

以下正是我为div引起的，目前让我感到非常沮丧。

.wrap { 
    height:auto; 
    width:100%; 
    margin:10px 0 0 0; 
    overflow:hidden; 
} 

.box1 { 
    height:320px; 
    width: 240px; 
    border: 1px solid #777; 
    margin: 0 0 0 10px; 
    display: inline-block; 
    float:left; 
} 

.box2 { 
    height:320px; 
    width:62%; 
    margin: 0 -3px 0 1px; 
    border: 1px solid #777; 
    display:inline-block; 
} 

.box3 { 
    height:320px; 
    width: 240px; 
    border: 1px solid #777; 
    display: inline-block; 
}

来源

2013-02-05 Shawn Bourque

你的div没有“崩溃”，他们是“流动”或“包装”设置一个.wrap一组宽度。崩溃意味着维度的损失。 – isherwood

漂浮物，通常以意想不到的或不合意的方式漂浮。改为使用inline-block布局，并在包装上使用固定宽度。

.wrapper {width: 960px;} 
.box {width: 240px; display: inline-block;} 
.box:nth-child(2) {width: 480px;} 

<div class="wrapper"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
</div>

来源

2013-02-05 04:38:59 isherwood

也许一个描述性的理由为什么'不使用浮动'将是有帮助的。此外，如果不使用浮动，也许建议如何完成同样的事情也会有所帮助... – barrypicker

我有点在我的（很老的）答案中做了这两件事。浮动元素有时会以意想不到的方式浮动。我提供的内嵌块解决方案*是建议。 – isherwood

让它达到100％会使浮体相互下降。

如果你想有一个水平滚动条

来源

2013-02-05 04:42:00

当浏览器窗口大小缩小时的div换行

回答

相关问题