Два div-блока на одной строке

Ответ 1

CSS

#block_container
{
    text-align:center;
}
#bloc1, #bloc2
{
    display:inline;
}

HTML

<div id="block_container">

    <div id="bloc1"><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></div>  
    <div id="bloc2"><img src="..."></div>

</div>

Кроме того, вы не должны помещать исходный контент в <div>, используйте соответствующий тег, например <p> или <span>.

Изменить: Вот демон jsFiddle.

Ответ 2

Я думаю, что лучшим практиком является использование display: inline-block;

выглядят как эта демонстрация: https://jsfiddle.net/vjLw1z7w/

Ответ 3

Вы можете использовать таблицу HTML:

<table>
<tr>
<td>
<div id="bloc1">your content</div>
</td>
<td>
<div id="bloc2">your content</div>
</td>
</tr>
</table>   

Ответ 4

Попробуйте использовать таблицу HTML или используйте следующий CSS:

<div id="bloc1" style="float:left">...</div>
<div id="bloc2">...</div>

(или используйте таблицу HTML)

Ответ 5

Вы можете сделать это во многом.

• Использование display: flex

#block_container {
    display: flex;
    justify-content: center;
}

<div id="block_container">
  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
  <div id="bloc2"><img src="..."></div>
</div>

Ответ 6

Используйте таблицу внутри div.

<div>
   <table style='margin-left: auto; margin-right: auto'>
        <tr>
           <td>
              <div>Your content </div>
           </td>
           <td>
              <div>Your content </div>
           </td>
        </tr>
   </table>
</div>

Ответ 7

diplay:flex; - еще один альтернативный ответ, который вы можете добавить ко всем приведенным выше ответам, который поддерживается во всех современные браузеры.

#block_container {
  display: flex;
  justify-content: center;
}

<div id="block_container">
  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
  <div id="bloc2"><img src="..."></div>
</div>

Ответ 8

Файл HTML

 <div id="container">
      <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
      <div id="bloc2"><img src="..."></div>
    </div>

Файл CSS

 #container
    {
        text-align:center;
    }
    #bloc1, #bloc2
    {
        display:inline;
    }

Ответ 9

В первую очередь я сделаю следующий код CSS:

#bloc1 {
   float: left
}

Это сделает #bloc2 встроенным с #bloc1.

Чтобы сделать его центральным, я добавил бы #bloc1 и #bloc2 в отдельный div. Например:

<style type="text/css">
    #wrapper { margin: 0 auto; }
</style>
<div id="wrapper">
    <div id="bloc1"> ... </div>
    <div id="bloc2"> ... </div>
</div>

Ответ 10

Используйте ниже Css:

#bloc1,
#bloc2 {
display:inline
} 

body {
text-align:center
}

Он сделает указанные 2 divs в центре в одной строке.

Ответ 11

Использовать простой HTML

<frameset cols="25%,*">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>