Question

我正在尝试使用CSS创建一个3列的Web布局。目前我有以下内容：

<HTML>
<head>
<style>
.container {
  margin: auto;
  padding: 20px 0 0 220px;
  position: relative;
  width: 700px;
}
.lefter{
  position: absolute;
  left: 0px;
  width: 450px;
  height:50%;
}
.righter{
  position: absolute;
  right: 0px;
  width: 450px;
  height:50%;
}
section {
  float:left;
  position:relative;
  margin-left: 450px;
  margin-right:450px;
  top:5px;
}
</style>

</head>
<body>
  <div class="containter">
    This is the Container Class it takes up a certain portion of the HTML page 
    <div class="left" style="border:1px solid">
        <ul>
          <li>Home</li>
          <li>Taco Menu</li>
          <li>Draft List</li>
          <li>Hours</li>
          <li>Directions</li>
          <li>Contact 1</li>
        </ul>
    </div>
    <div class="righter" style="border:1px solid">
        <ul>
          <li>Right1 </li>
          <li>Taco Menu</li>
          <li>Draft List</li>
          <li>Hours</li>
          <li>Directions</li>
          <li>Contact 2</li>
        </ul>
    </div>
    <section>
           Center Column
    </section>

</body>
</html>

目前，在最大化窗口中输出看起来（类似于此布局）：

Home              Center Column     Right1
Taco Menu                           Taco Menu
Draft List                          Draft List
Hours                               Hours
Directions                          Directions
Contact                             Contact

如果有三列A-B-C，则对应上述内容如下： [A] [B] [C]

当您调整浏览器大小时，以下内容会折叠，（并重新排列列）：

Home                Right1            Cen
Taco Menu           Taco Menu         ter
Draft List          Draft List         Co
Hours               Hours             lumn
Directions          Directions
Contact             Contact

重新排列为： [A] [C] [B] |其中[B]包含其文本。

我正在尝试的是专栏的B＆amp; C保持它们的相对大小（即无包装），并为浏览器窗口添加宽度滚动条而不是包裹中心列（B）并将右列（C）折叠到其他两列上。对于示例网站：Quora

要获得此行为，它是位置属性的函数吗？相对于页面上的其他元素还是另一个元素属性？

参考文献： http://help.gathercontent.com/developer-api/

Answer 1

首先，你没有告诉包含“center colum”文本的部分是一个宽度，所以你不可能知道你希望它表现得像那样并停止包装。另一方面，我会尝试更快的aproach，它将按顺序编写你的html，因为它应该被渲染，使它们成为所有部分或所有div，并给它们一个类，即“主框”并将它们设置为display：inline-block所以它们会在另一个旁边呈现一个。凭借一些不错的利润，你可以避免使用那么多的定位。

Answer 2

我同意建议您制作响应式布局的人，侧滚动是非常糟糕的用户体验。我不完全确定你在这里想要达到的目标，是这样的吗？

TableRow:
2
5
10
15
..
30
40
50
// And here it begins again:
2
5
10
..
// And again:
2
5
10
// And the sequence may change too:
3
6
10

将CSS定位在3列中

2 个答案: