0

如何在一行中建立一列？

现在这些列是一个接一个垂直的。

例子：

█</p>

█</p>

█</p>

但我需要水平构建它们。

█ █ </p>

这是源代码的链接。

4

5 回答 5

3

我建议您将它们包装到一些外部<div>并float: left为<div>.

这是如何做到这一点的基本示例。

​HTML代码：

<div class="column"​​​​​​​​​&gt;
   <span>Simply dummy text</span>
</div>

<div class="column">
   <span>Simply dummy text</span>
</div>

<div class="column">
   <span>Simply dummy text</span>
</div>

并且CSS：

.column {
   width: 160px;
   height: 200px;
   background-color: #eeeeee;
   float: left;
   margin-left: 5px;
   text-align: center;
}​


注意：这是jsfiddle中的工作示例。

注意 2：另外，如果您只想将其class用于<div>元素，请将其声明为div.column. 更新

： 感谢@poncha的建议。答案已更新。

于 2012-06-23T11:04:17.220 回答
1

几种可能的解决方案。

1）float: left在您需要在同一行排列的每个 s 上使用。（可选）为每个内容添加宽度以避免内容混乱。在父容器中包含所有 <div>

2）使用水平平铺每个 sdisplay: inline

3）实际上这是从早期的SO答案中复制的，我已经多次使用它......

<style>
 #whatever div {
  display: inline
  margin: 0 1em 0 1em
  width: 30%
}
</style>

<div id="whatever">
 <div>content</div>
 <div>content</div>
 <div>content</div>
</div>

https://stackoverflow.com/a/226261/608170

于 2012-06-23T11:11:32.020 回答
1

在我看来，语义上更像是一个列表。你真的要关心IE7吗？如果不是，我建议你渲染一个标记，如

<ul class="inline-list">
  <li>my content</li>
  <li>my content</li>
  <li>my content</li>
</ul>

然后通过 CSS 使用

.inline-list li {
  display: inline-block;
}

这是小提琴

列表条目的行为类似于块元素（例如简单的 div），因此您可以应用宽度和高度等...很好的是它会自动换行。（这对于浮动恕我直言并不容易）

对于 IE7：如果显示为块元素，则优雅降级，但取决于用例（也许你可以通过使用 display: inline 解决这个问题；但我现在无法证明这一点）

于 2012-06-23T11:12:03.620 回答
0

将 float:left 添加到 div 并使用 overflow:hidden 属性固定宽度

div { 
    -webkit-column-width: 300px;
    -webkit-column-height: 300px;    
    height: 300px;
    width:300px;
    float:left;
    -webkit-column-gap:0px;
    overflow:hidden;
}

演示：http: //jsfiddle.net/surendraVsingh/52u4W/1/

于 2012-06-23T11:08:14.983 回答
0

尝试这个

 <div>
        <div id="one" class="clhr">
             <h3>Column1</h3>
        </div>
        <div id="two" class="clhr" >
             <h3>Column2</h3>
        </div>
        <div id="three" class="clhr">
             <h3>Column3</h3>
        </div>
    </div>

   .clhr {
    border: 1px solid red;
    float: left;
    height: 300px;
    margin-right: 16px;
    width: 200px;
}
于 2012-06-23T11:08:30.363 回答