Question

这可能是我第一次尝试在线询问有关CSS或HTML的问题，但正如标题所述，当浏览器窗口缩小（浏览器窗口）时，我遇到了div在对方崩溃的问题这不是全屏）。

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

以下就是我为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;
}

Answer 1

漂浮......浮动，通常是以意想不到或不合需要的方式。请改用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>

Answer 2

将其设置为100％将导致浮动物降低到彼此之下。

如果需要水平滚动条

，请将.wrap设置为设置的宽度

当浏览器窗口按比例缩小时，Div包装

2 个答案: