中心三个div彼此相邻

Question

刚刚开始并不是很擅长但是我不能把这些div放在中心可以有人帮忙：/我已经在网上找了但没找到任何适合它的东西......我只有12个这对我来说都很新鲜。

*{
    margin: 0px;
    padding: 0px;
}
#Title{
    height:75px;
    width:60%;
    margin-top:5%;
    background-color:black;
    display: table;
    margin-left: auto ;
    margin-right: auto ;
}
#Wallpaper{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}
#Logo{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}
#YoutubeBanner{
    width:15%;
    height:250px;
    background-color:black;
    display: inline-block;
    margin-top:5%;
    margin-left: auto ;
    margin-right: auto ;
    float:center;
}

Answer 1

这是实现这一目标的一种方式，它具有响应性和流畅性。

DEMO：https://jsbin.com/puhixo/1/

<强> CSS

body,
html {
    margin: 0;
    padding: 0;
    background: #fff;
    font: 1em/1.5 sans-serif;
}
.row,
.column {
    box-sizing: border-box /*so padding and borders are included in width */
}
.row {
    word-spacing: -1em; /* fix the inline block extra space issue */
    letter-spacing: -1em; /* fix the inline block extra space issue */
    overflow: hidden;
    text-align: center;
    padding: 0 20px;
    width: 100%;
    max-width: 1200px;
    margin:0 auto;
}
.column {
    vertical-align: top;
    word-spacing: normal; /* reset child */
    letter-spacing: normal; /* reset child */
    display: inline-block;
    border: 1px solid red;
    width: 100%; /* the size UNDER the min-width in the media query*/
    padding: 10px;
    text-align: left; /* reset child */
}
@media (min-width:500px) { 
    .column {
        width: 33.333%;
        max-width: 250px; /* the max-width */
    }
}

<强> HTML：

<div class="row">
   <div class="column">
      Column 1 text goes here. Text goes here for column 1.
   </div>
   <!--/.column -->
   <div class="column">
      Column 2 text goes here. Text goes here for column 1.  
   </div>
   <!--/.column -->
   <div class="column">
      Column 3 text goes here. Text goes here for column 1.
   </div>
   <!--/.column -->
</div>
<!--/.row -->

Answer 2

您也可以编写这样的代码。

HTML

<center>
  <div>Div1</div>
  <div>Div2</div>
  <div>Div3</div>
</center>

CSS

div
{
  display: inline-block;
  border: 1px solid red;
}

Answer 3

＆＃13;

＆＃13;

div.wrapper {
  -webkit-column-count: 3;
  /* Chrome, Safari, Opera */
  -moz-column-count: 3;
  /* Firefox */
  column-count: 3;
  width: 80%;
  border: 1px solid black;
  text-align: center;
  margin: 0 auto;
}

＆＃13;

<div class="wrapper">
  <div>Hi you</div>
  <div>Yes you</div>
  <div>Yup</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这样的事情对你有用吗？