如何在同一行排列3个div？

时间：2011-12-31 22:14:33

标签： css html

有人可以帮助我解决这个问题，因为我已经处理了很长时间了....

我想在同一行上找到3个div，其中一个div看起来像这样：

<div>  
  <h2 align="center">San Andreas: Multiplayer</h2>  
  <div align="center">
    <font size="+1">  
      <em class="heading_description">15 pence per slot</em>  
    </font>  
    <img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">  
    <a href="gfh" class="order-small">  
      <span>order</span></a>  
  </div>

和另外两个是相同的div请帮我把同一行的所有三个div放在右边的一个中间，一个放在左边

12 个答案:

答案 0 :(得分：92)

我很惊讶没有人将CSS表布局作为解决方案。

查看Working Demo

纯CSS 2.1，跨浏览器（IE8 +）

<强> HTML： 

<div class="Row">
    <div class="Column">C1</div>
    <div class="Column">C2</div>
    <div class="Column">C3</div>
</div>

<强> CSS： 

.Row
{
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}
.Column
{
    display: table-cell;
    background-color: red; /*Optional*/
}

答案 1 :(得分：28)

查看我的代码

<div>
    <h2 align="center">San Andreas: Multiplayer</h2>
    <div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
    <div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>
    <div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</div>

在你的css文件中：

.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}

答案 2 :(得分：11)

我不知道我是如何结束这篇文章的，但由于大部分答案都是使用花车，绝对定位以及其他一些现在不是最佳的选项，我想我会给出一个新答案更多关于它的标准（浮动不再是犹太洁食）。

.parent {
  display: flex;
  flex-direction:row;
}

.column {
  flex: 1 1 0px;
  border: 1px solid black;
}
<div class="parent">
    <div class="column">Column 1</div>
    <div class="column">Column 2<br>Column 2<br>Column 2<br>Column 2<br></div>
    <div class="column">Column 3</div>
</div>

答案 3 :(得分：9)

这里有两个样本：http://jsfiddle.net/H5q5h/1/

使用float:left和overflow:hidden的包装。包装器确保包装器的兄弟从包装器下面开始。

第二个使用更新的display:inline-block，可以忽略包装器。但旧版浏览器通常不支持此功能，因此请谨慎使用。此外，项目之间的任何空白区域都会在项目div的左侧和右侧产生不必要的“边缘”空白区域。

答案 4 :(得分：9)

旧主题，但也许有人会喜欢它。

小提琴链接http://jsfiddle.net/74ShU/ 

<div class="mainDIV">
    <div class="leftDIV"></div>
    <div class="middleDIV"></div>
    <div class="rightDIV"></div>
</div>

和css 

.mainDIV{
    position:relative;
    background:yellow;
    width:100%;
    min-width:315px;
}
.leftDIV{
    position:absolute;
    top:0px;
    left:0px;
    height:50px;
    width:100px;
    background:red;
}
.middleDIV{
    height:50px;
    width:100px;
    background:blue;
    margin:0px auto;
}
.rightDIV{
    position:absolute;
    top:0px;
    right:0px;
    height:50px;
    width:100px;
    background:green;
}

答案 5 :(得分：2)

只需在要生成的所有div上添加float left属性，使其显示在除最后一行之外的行中。这是示例

<div>
  <div style="float: left;">A</div>
  <div style="float: left;">B</div>
  <div>C</div>
</div>

答案 6 :(得分：2)

这更容易，并且为未使用的无序/有序列表标记提供了目的。

在CSS中添加：

    li{float: left;}  //Sets float left property globally for all li tags.

然后添加HTML：

    <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>        
    </ul>

现在看完全部排队！不再争论表格和divs了！

答案 7 :(得分：2)

2019年答案：

使用CSS网格：

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

答案 8 :(得分：1)

查看他们处理得很好的基础快速原型框架，基本上它们允许你使用这样的HTML：

<div class="row">
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
    <div class="four columns">
    </div>
</div>

这是我遇到过的最简单的HTML / CSS网格系统，它基于12列网格。

基本上，列的宽度为％，左边距相对于父行。它们的列浮动设置为左，位置设置为相对，显示设置为块。

该行设置了几个属性，它们关注问题的核心，这通常会导致包含div崩溃到0的高度，从而防止后续div被“按下”，因为它们应该被按下。

您可以在此处找到使用基础网格系统的示例：http://foundation.zurb.com/docs/grid.php

如果您不想使用整个框架，以下CSS应该使用我提供的示例代码来解决问题：

.row:after {
    content: "";
    clear: both;
    display: table;
}

.four.column {
    float: left;
    width: 33%;
}

如果你真的特别想要一个左中心和右列，那么使用这样的代码：

CSS：

.row:after {
    content: "";
    clear: both;
    display: table;
}

.left {
    float: left;
    width: 100px;
}

.center {
    margin: 0 auto;
    width: 100px;
}

.right {
    float: right;
    width: 100px;
}

HTML：

<div class="row">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

答案 9 :(得分：0)

将分区放在'td'标签中。就是这样。

答案 10 :(得分：-1)

另一种可能的解决方案：

<div>
  <h2 align="center">
  San Andreas: Multiplayer
</h2>
    <div align="center">
<font size="+1"><em class="heading_description">15 pence per
slot</em></font> <img src=
"http://fhers.com/images/game_servers/sa-mp.jpg" class=
"alignleft noTopMargin" style="width: 188px;" /> <a href="gfh"
class="order-small"><span>order</span></a>
    </div>
 </div>

也很有帮助。

答案 11 :(得分：-1)

为什么不尝试使用bootstrap的解决方案。如果您不想与桌子和花车混在一起，那么它们是完美的选择。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <!--- This line is just linking the bootstrap thingie in the file. The real thing starts below -->

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
    <div class="col-sm-4">
      One of three columns
    </div>
  </div>
</div>

无需干预复杂的CSS，最好的事情是您可以通过更改数字来编辑列的宽度。您可以在https://getbootstrap.com/docs/4.0/layout/grid/

中找到更多示例
相关问题
最新问题