Question

我有一个左翼小块,作为旁遮挡。之后,还有一小块材料(绿色)储存。材料四内的内容是左轮(蓝色)。

在浏览器的宽度太小,无法容纳他们时,我希望能够横向地推展箱;例如,有很多箱子。相反,内容分散在旁边,我正在整页上。

Here is the page layout when the browser window is wide enough:

Here is the HTML:

<div id="container">
  <div id="sidebar">Sidebar</div>
  <div id="content">
    <p class="box">Box 1</p>
    <p class="box">Box 2</p>
    <p class="box">Box 3</p>
  </div>
  <div style="clear: both;"></div>
</div>

这里是国家安全局:

* {
    margin: 0px;
    padding: 0px;
}

#container {
    background: yellow;
}

#sidebar {
    float: left;
    background: red;
}

#content {
    float: left;
    white-space: nowrap;
    background: green;
}

.box {
    width: 200px;
    height: 250px;
    background: blue;
    margin: 10px;
    float: left;
}

请帮助我了解我究竟是错做的。谢谢。

Answer 1

你只需要做一些事情来总结一下社会保障局的财产:overflow-x: scroll;。

**Important 这是一种CSS3特征,一些浏览器可能不支持overflox-x。因此,我高度建议你读到以下网站:http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-less-guilt/“rel='nofollow”http://net.tutsplus.com/tutorials/html-css-techniques/html5-and-css3-less-guilt/。

http://jsfiddle.net/WXFJU/“rel=”nofollow。 http://jsfiddle.net/WXFJU/。

<><><><>>><>>>>><>>>>>>>

<div id="container">
  <div id="sidebar">Sidebar</div>
  <div class="overflow-x">
      <div id="content">
        <p class="box">Box 1</p>
        <p class="box">Box 2</p>
        <p class="box">Box 3</p>
      </div>
  </div>
  <div style="clear: both;"></div>
</div>

<>CSS

* {
    margin: 0px;
    padding: 0px;
}

#container {
    width: 100%;
    background: yellow;
}

#sidebar {
    float: left;
    background: red;
}

#content {
    float: left;
    white-space: nowrap;
    background: green;
}

.box {
    width: 200px;
    height: 250px;
    background: blue;
    margin: 10px;
    float: left;
}

.overflow-x {
    overflow-x: scroll;
    display: block;
}

Answer 2

你也有必要为“www.occ.cccc.org/co”确定一个 w。

Answer 3

你的内容也需要得到宽大。

#content {
    width: 1000px;
}

友情链接