Как разместить два деления рядом

0

как я поместил их в divs бок о бок, я посмотрел онлайн и на других форумах, но они казались немного запутанными, потому что мой код создает "бумажный" эффект, и их не так сильно застряли в этот момент.. делает тело знает, как это сделать? У меня есть jsfiddle ЗДЕСЬ

на этом сайте он делает мне почтовый код, чтобы включить js скрипку, вот вот код

/** Playstation **/
.info, .info:before, .info:after
{
background-color: blue;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}

.infops
{
position: relative;
width: 50%;
padding: 2em;
margin: 50px auto;
}

.infops:before, .infops:after
{
content: "";
 position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(2.5deg);
-o-transform: rotate(2.5deg);
transform: rotateZ(2.5deg);
z-index: -1;
}

.infops:after
{
 -webkit-transform: rotateZ(-2.5deg);
 -o-transform: rotate(-2.5deg);
transform: rotateZ(-2.5deg);
}

.infops h1
{
  font-size: 1.8em;
 font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-top: 1px solid #ddd;
border-bottom: 2px solid #ddd;
}

.infops p
{
text-align: left;
margin: 1.5em 0;
}
/**xbox**/
.infoxbox, .infoxbox:before, .infoxbox:after
{
background-color: orange;
border: 1px solid #ccc;
box-shadow: inset 0 0 30px rgba(0,0,0,0.1), 1px 1px 3px rgba(0,0,0,0.2);
}

.infoxbox
{
position: relative;
width: 50%;
padding: 2em;
margin: 50px auto;
}

.infoxbox:before, .infoxbox:after
{
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: rotateZ(2.5deg);
-o-transform: rotate(2.5deg);
transform: rotateZ(2.5deg);
z-index: -1;
}

.infoxbox:after
{
-webkit-transform: rotateZ(-2.5deg);
-o-transform: rotate(-2.5deg);
transform: rotateZ(-2.5deg);
}

.infoxbox h1
{
font-size: 1.8em;
font-weight: normal;
text-align: center;
padding: 0.2em 0;
margin: 0;
border-top: 1px solid #ddd;
border-bottom: 2px solid #ddd;
}

.infoxbox p
{
text-align: left;
margin: 1.5em 0;
}

И вот мой html

<div class="infoxbox">
<h1>Xbox</h1>

</div>
<div class="info">
<h1>Playstation</h1>

</div>
  • 0
    Я должен был отредактировать несколько вещей, я случайно написал до того, как закончил
  • 0
    добавьте PS во второй класс div, пожалуйста, так что Playstation получит стиль
Теги:

7 ответов

0
Лучший ответ

это то, чего ты хочешь?

    .infops {float:left;}

http://jsfiddle.net/c6gus/3/

Поделиться
  • 0
    jsfiddle.net/c6gus/3 я хочу xbox слева и playstation справа, поэтому я бы добавил .infops {float: right;}
  • 0
    Вы можете просто сделать это, как на скрипке. но я думаю, вы уже видели это.
2

Вы можете использовать display:inline-block для обоих div

.infoxbox{
     display:inline-block
}

.info{
    display:inline-block;
}

скрипка

Поделиться
2

Вы можете использовать display:inline-block. Я использовал встроенный атрибут стиля для демонстрации

DEMO

Поделиться
  • 0
    я забыл добавить пс ко второму имени класса div, чтобы они оба стилизовались, когда я его добавил, это не сработало
2

Как насчет float: left to infops div?

Поделиться
  • 0
    только к этому div или обоим?
  • 0
    я просто сделал это в моем jsfiddle, и он вылетел на страницу
1

Вам просто нужно использовать float: left для одной стороны и float:right для другого.

Поделиться
1

Другой альтернативой является использование таблиц:

<table width="100%">
<td>
<div class="infoxbox">

<h1>Xbox</h1>

</div>
</td>
<td>
<div class="infops">

<h1>Playstation</h1>

</div>
</td>
</table>

http://jsfiddle.net/c6gus/15/

Поделиться
  • 0
    я собираюсь использовать таблицы для чего-то в div, но +1 за хорошую идею
0 
.infoxbox{display: inline-block;}
.infops{display: inline-block;}
Поделиться
  • 0
    ничего не изменилось в моем jsfiddle
  • 0
    jsfiddle.net/c6gus/9
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню