有人能帮我解决这个问题吗？我已经处理了很长时间了...
我正在尝试将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放在同一行，一个在右边，一个在中间，一个在左边。
我很惊讶没有人提出CSS表格布局作为解决方案：
.Row {
display: table;
width: 100%; /*Optional*/
table-layout: fixed; /*Optional*/
border-spacing: 10px; /*Optional*/
}
.Column {
display: table-cell;
background-color: red; /*Optional*/
}<div class="Row">
<div class="Column">C1</div>
<div class="Column">C2</div>
<div class="Column">C3</div>
</div>兼容 IE8+
table-cell 的 DIV 上可能需要添加％的宽度，以便将它们显示为您想要的方式：http://stackoverflow.com/questions/43565213/how-to-distribute-multiple-divs-sections-within-same-row - HappyHands31查看我的代码
.float-left {
float:left;
width:300px; // or 33% for equal width independent of parent width
}<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>#leftcolumn { float: left; width: 300px; } #midcolumn { margin: 0 auto; width: 300px; } #rightcolumn { float: right; width: 300px; }但是所有东西都搞乱了网站...而且中间也不起作用... - Mr.Bluefloat: left; width: 300px; 放置在 #leftcolumn、#midcolumn 和 #rightcolumn 中。 - Gabriel Santos我不确定为什么会进入这篇文章，但是因为大多数答案都使用浮动、绝对定位和其他现在不再是最优选项的方法，所以我想给出一个更符合标准（浮动不再适用）且更为时新的答案。
.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>2019年的答案:
使用CSS网格布局：
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
grid-auto-flow: column的示例，正如评论中提供的那样？当列数未知时，我无法弄清楚正确的使用方法。谢谢。 - ghiscoding这里有两个样例：http://jsfiddle.net/H5q5h/1/
第一个使用了float:left和一个带有overflow:hidden的包装器。该包装器确保包装器的同级元素从包装器下方开始。
第二个使用了较新的display:inline-block，并且可以忽略包装器。但是，这在旧浏览器中通常不受支持，因此请谨慎使用。而且，任何项目元素之间的空格都会导致不必要的左右“margin-like”空白。
虽然是旧话题，但也许有人会喜欢它。
JSFiddle链接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;
}
只需在除最后一个外，您想使其在同一行中显示的所有div上添加float left属性。以下是示例：
<div>
<div style="float: left;">A</div>
<div style="float: left;">B</div>
<div>C</div>
</div>
<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/找到更多示例。
li{float: left;} //Sets float left property globally for all li tags.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
- 欢迎来到 Stack Overflow。
- 通过换行、缩进等方式格式化您的 HTML 代码会让它更易于阅读。
- 您需要更清楚地说明您的需求。这些元素应该填满页面宽度还是使用它们的默认尺寸？
- vdbuilder