Html 同一行上的两个 div 块

Two div blocks on same line

提问by Bertaud

How to center on the same "line" two div blocks?

如何将两个 div 块放在同一条“线”上？

First div:

第一个div：

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

Second div:

第二个div：

<div id=bloc2><img src="..."></div>

回答by MrCode

CSS:

CSS：

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

HTML

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>

Also, you shouldn't put raw content into <div>'s, use an appropriate tag such as <p>or <span>.

此外，您不应将原始内容放入<div>'s 中，请使用适当的标签，例如<p>或<span>。

Edit: Here is a jsFiddle demo.

编辑：这是一个jsFiddle 演示。

回答by Super User

You can do this in many way.

您可以通过多种方式做到这一点。

1. Using display: flex

1. 使用 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>

2. Using display: inline-block

2. 使用 display: inline-block

#block_container {
    text-align: center;
}
#block_container > div {
    display: inline-block;
    vertical-align: middle;
}

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

3. using table

3. 使用 table

<div>
    <table align="center">
        <tr>
            <td>
                <div id="bloc1">Copyright &copy; All Rights Reserved.</div>
            </td>
            <td>
                <div id="bloc2"><img src="..."></div>
            </td>
        </tr>
    </table>
</div>

回答by Gildor

I think now, the best practis is use display: inline-block;

我现在认为，最好的做法是使用 display: inline-block;

look like this demo: https://jsfiddle.net/vjLw1z7w/

看起来像这个演示：https: //jsfiddle.net/vjLw1z7w/

回答by user3198580

You can use a HTML table:

您可以使用 HTML 表格：

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

回答by adrien

Try an HTML table or use the following CSS :

尝试使用 HTML 表格或使用以下 CSS：

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

(or use an HTML table)

（或使用 HTML 表格）

回答by Alex

diplay:flex;is another alternative answer that you can add to all above answers which is supported in all modern browsers.

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>

回答by BernieSF

Use a table inside a div.

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

回答by Lakindu Gunasekara

HTML File

HTML文件

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

CSS File

CSS文件

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

回答by ibrahim Abdullah

Use Simple HTML

使用简单的 HTML

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

回答by Smita Jain

Use below Css:

使用下面的CSS：

#bloc1,
#bloc2 {
display:inline
} 

body {
text-align:center
}

It will make the mentioned 2 divs in the center on the same line.

它将使上述 2 个 div 位于同一行的中心。