arrange block elements in a single horizontal line

2019-03-03 23:03发布

站内问答 / 前端开发
1504 1 6

I dont know, either I am not that good in the art of 'search' or this topic is so so simple that nobody generally asks this but I have been searching this ever since i started my website. I have only four block elements on my webpage.

  • The first Block element displays on the top alone
  • The second, third and fourth block elements, I want arranged in a single horizontal line from next line
  • At present I am using the table to do this, but its bad styling, isn't it?!
  • Please tell me a way in which I can bring all those 3 block elements in the same line

At present, if I remove the table property, my block elements move to next line. This is how it looks if i remove the table property:

^^^^^^^^^Block element: top^^^^^^^^^^^^

^^^^Block2^^^^^

^^^^Block3^^^^^

^^^^Block4^^^^^

I want block elements 2,3,4 in same line like this: ^^^^Block2^^^^^ ^^^^Block3^^^^^ ^^^^Block4^^^^^

1条回答
何必那么认真
2楼-- · 2019-03-03 23:08

You can try display:inline-block or float:left.

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

enter image description here

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      display: inline-block;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

enter image description here

<html>
  <head>
    <style type="text/css">
      div {
      border: 1px black solid;
      float: left;
      }
    </style>
  </head>
  <body>
    <div>aaa</div>
    <div>bbbbbb</div>
    <div>cccc</div>
  </body>
</html>

enter image description here

These are the effects on Chrome.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)