Question

此代码

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

显示这样的div。

div1
div2
div3
div3

我想要显示这些

  div1   div2   div3   div4

水平放置的div数量不固定且有所不同，因此我无法编写带有左边距，宽度等定义的css类。

最好的办法是什么？

Answer 1

将显示样式设置为内联块

<div id="div1" style="display:inline-block"></div>
<div id="div2" style="display:inline-block"></div>
<div id="div3" style="display:inline-block"></div>
<div id="div4" style="display:inline-block"></div>

或更好

<style>
#div1, #div2, #div3, #div4 {
   display:inline-block
}
</style>

Answer 2

使用flexbox：

composer create-project laravel/laravel ProjectName 5.2 --prefer-dist

.container {
  display:flex;
  flex-direction:row;
}
.container > div {
  border:5px dotted black;
  background:red;
  flex-grow:1;
  padding:2em;
  text-align:center;
}

Some prefixing may be required depending on your target audience

Learn about all the possibilities here

Answer 3

只需添加类似

的类

<div id="div1" class="inline">lorem</div> 
<div id="div2" class="inline">ipsum</div>

并在你的CSS中：

.inline {
float:left;
}

另外，你可以添加一些填充......

水平定位html div的最佳方法是什么？

3 个答案: