CSS：

Question

如何在HTML中垂直显示div。

当我们使用此代码时：

<div>Some Text 1 | </div>
<div>Some Text 2 | </div>
<div>Some Text 3 | </div>
<div>Some Text 4 | </div>
<div>Some Text 5 | </div>
<div>Some Text 6 | </div>
<div>Some Text 7 | </div>

结果是：

Some Text 1 |
Some Text 2 |
Some Text 3 |
Some Text 4 |
Some Text 5 |
Some Text 6 |
Some Text 7 |

如何得到如下结果：

Some Text 1 | Some Text 2 | Some Text 3 | Some Text 4 | Some Text 5 | Some Text 6 | Some Text 7

与上面的垂直滚动相同

我尝试了这个StackOverflow问题，但它与我想要的不一样，how to align divs vertically in html and css?

Answer 1

有很多方法可以做到这一点，但我认为最简单的方法是：

您可以将div标签更改为范围。
将CSS'display'属性更改为'inline-block'或'inline'。

它可能会显示您正在寻找的结果。

要添加滚动，您可能需要查看div / spans的父标记并添加CSS'spresh-x'属性并将其设置为'scroll'。

Answer 2

将div保存在具有display flex属性的包装div中;

<div style="display: flex;">
  <div>Some Text 1 | </div>
  <div>Some Text 2 | </div>
  <div>Some Text 3 | </div>
  <div>Some Text 4 | </div>
  <div>Some Text 5 | </div>
  <div>Some Text 6 | </div>
  <div>Some Text 7 | </div>
 </div>

Answer 3

不是用HTML编写分隔符，而是只使用CSS选择器。

您可以使用伪选择器：:after和:last-child来选择相应的div，并在具有属性|的元素后设置content：< / p>

.item {
    display: inline-block;
}

.item:after {
    content: ' |';
}
.item:last-child:after {
    content: '';
}

<div class="items">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
  <div class="item">Four</div>
  <div class="item">Five</div>
</div>

或者，您可以将内容保留在HTML中并使用span，或者只需将display的{{1}}属性设置为.item。

编辑：有一个速记版本可以使用运算符inline-block在右侧元素（即所有这些元素，但最后一个元素）上设置content: ' |'。下面是代码：

.item {
  display: inline-block;
}

.item+.item:before {
  content: ' | ';
}

Answer 4

你只需要定义“display：inline;”样式或css文件中的属性。 css：

div{
display: inline-block;
}

Answer 5

使用自适应网页设计。

CSS：

createCode

网页：

.container{
  width: 90%;
  max-width: 1200px;
  padding: 0% 0; /* 0px/1200px = 0 */
  margin: 0 auto;
}
.grid1{ width:8.33333333333333%;float:left; }       /* 100px/1200px=0,0833333333333333=8,33333333333333% */
.grid2{ width: 16.66666666666667%;float:left; }         /* 200px/1200px=0,1666666666666667=16,66666666666667% */
.grid3{ width: 25%;float:left; }            /* 300px/1200px=0,25=25% */
.grid4{ width:33.33333333333333%;float:left; }         /* 400px/1200px=0,3333333333333333=33,33333333333333% */
.grid5{ width:41.66666666666667%;float:left; }      /* 500px/1200px=0,4166666666666667=41,66666666666667% */
.grid6{ width:50%; float:left; }                /* 600px/1200px=0,5=50% */
.grid7{ width:58.33333333333333%; float:left; }     /* 700px/1200px=0,5833333333333333=58,33333333333333% */
.grid8{ width:66.66666666666667%; float:left; }                 /* 800px/1200px=0,6666666666666667=66,66666666666667% */
.grid9{ width:75%; float:left; }            /* 900px/1200px=0,75=75% */
.grid10{ width:83.33333333333333%; float:left; }                /* 1000px/1200px=0,8333333333333333=83,33333333333333% */
.grid11{ width:91.66666666666667%; float:left; }            /* 1100px/1200px=0,9166666666666667=91,66666666666667% */
.grid12{ width: 100%; float:left; }             /* 1200px/1200px=1=100% */

   @media screen and (max-width : 705px) {
.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9,
.grid10,
.grid11,
.grid12 {
  width: 100%;
}}

在HTML中垂直划分

5 个答案:

CSS：

网页：