Не очень хорошо, только начинаю, но я просто не могу сосредоточить эти divs. Кто-то может помочь:/Я посмотрел онлайн, но не нашел ничего, что сработает с ним ... i ' м всего 12, и для меня это совершенно новое.Центр три divs рядом друг с другом

*{ 
    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; 
}

2014-11-28 user3340817

Как выглядит ваш HTML? И 'float: center' не существует, допускаются только значения« left/right ». Вы пишете около трех div, в CSS у вас есть 4 элемента с общей шириной 105%, более 100% :-) – panther

Вот один из способов сделать это, он отзывчивый и жидкий.

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

источник

2014-11-28 21:17:02 Christina

Вы также можете написать код, как это.

HTML

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

CSS

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

источник

2014-11-29 03:53:36 Sush

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

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

Would что-то нравится эта работа для вас?

источник

2014-11-29 04:20:03 Jhecht

Центр три divs рядом друг с другом

ответ

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

Смежные вопросы