arrange block elements in a single horizontal line

2019-03-03 22:32发布

问题:

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:

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>

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

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