HTML

Question

这应该是简单的我希望有三个div并排排列但是它们会一直到处都是

继承人我正在使用的div，我认为它只是一些简单的CSS但我无法让它工作。它的问题很简单，但任何帮助都会很棒。

最后一点我希望在所有大小的moniters级别

上都是一样的

感谢阅读

divs和我希望它们的宽度 -

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

Answer 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。

Answer 2

你的宽度属性不是像px那样使用单位。但是，您可以使用float：property。

来完成您想要的任务

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/。

然而，如果窗口的宽度变得窄于1800px，则元件将被迫彼此相容以容纳。您可以通过将所有内容放在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/

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

Answer 3

这是@frenchie提议的<{3}}

**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>

需要帮助并排对齐3个div

3 个答案:

HTML

CSS

HTML

CSS