0

这可能是我第一次尝试在线询问有关 CSS 或 HTML 的问题，但正如标题所述，当浏览器窗口缩小时（浏览器窗口未满屏幕）。

div 被设置为 3 个 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;
}
4

2 回答 2

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>
于 2013-02-05T04:38:59.250 回答
0

Having it at 100% will cause the floats to drop bellow each other.

Set a .wrap to a set width if you want a horizontal scroll bar

于 2013-02-05T04:42:00.747 回答