【问题标题】：Need help Aligning 3 divs side by side需要帮助并排对齐 3 个 div
【发布时间】：2014-04-19 04:27:37
【问题描述】：

这应该很简单，我想让三个 div 并排排列，但它们会到处乱跑

这是我正在使用的 div，我认为这只是一些简单的 css，但我无法让它工作。它可能是一些简单的事情，但任何帮助都会很棒。

最后一点，我希望这在所有尺寸重新分级的显示器上都相同

感谢阅读

div 和我希望它们的宽度 -

<div id="searchresult" style="width:600"></div>
<div id="searchresultGame" style="width:600"></div>
<div id="searchresulttv" style="width:600"></div>

【问题讨论】：

添加浮动：左；到每个 div

标签： css html css-float width

【解决方案1】：

使用float 将它们保持在同一行。请记住，如果 div 的总宽度大于显示区域，它们将落到下一行。如果您看到它们显示在多行上，请使用较小的宽度值测试下面的代码。如果您想强制设置宽度（导致出现滚动条而不是内容移动到下一行），您可以使用 HTML 表格。

<div id="searchresult" style='float:left;border:2px solid #555;width:600px;'>searchresult</div>
<div id="searchresultGame" style='float:left;border: 2px solid #555;width:600px;'>searchresultGame</div>
<div id="searchresulttv" style='float:left;border: 2px solid #555;width:600px;'>searchresulttv</div>

如果您正在研究如何在您的网站上布局内容，您可能需要查看W3Schools layouts tutorial。

【讨论】：

【解决方案2】：

您的 width 属性没有使用单位，例如 px。但是，您可以使用 float: 属性完成您想要的操作。

HTML

<div id="searchresult">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>
<div id="searchresultGame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>
<div id="searchresulttv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>

CSS

div {
    border: 1px solid black;
    background-color: #EEEEEE;
    width: 300px;
    float: left;
}

这是一个小提琴，其中显示了 http://jsfiddle.net/P6Atc/ 。

但是，如果窗口的宽度变得小于 1800 像素，则元素将被强制在彼此下方以适应。您可以通过将所有内容放在具有固定宽度的 div 中来解决此问题，该宽度总计子 div 元素的宽度。

HTML

<div class="container">
<div id="searchresult">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>
<div id="searchresultGame">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>
<div id="searchresulttv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quidem impedit aspernatur quam itaque sed cum delectus nobis asperiores vitae iure ratione quod voluptas placeat mollitia magni earum esse amet!</div>
</div>

CSS

div {
    border: 1px solid black;
    background-color: #EEEEEE;
    width: 300px;
    float: left;
}
.container
{
    width: 906px;
}

示例如下：http://jsfiddle.net/P6Atc/1/

这样做的缺点是，如果在较小的屏幕上查看内容，您会得到一个难看的水平滚动条。

【讨论】：

我可以接受不利的一面，这并不重要，这正是我所需要的，谢谢

【解决方案3】：

这是@frenchie 提议的工作DEMO

**CSS**

.div{
   width:50px; height:50px; border:1px solid; float:left
   }

**HTML**

<div id="searchresult" class="div"></div>
<div id="searchresultGame" class="div"></div>
<div id="searchresulttv" class="div"></div>

【讨论】：