Question

我如何将这些并排放在div上我已经在网上和其他论坛上看过但是它们似乎有点令人困惑，因为我的代码正在创建一个＆＃34;纸张＃34;效果和他们的不是真的卡在这一刻..是否有人知道如何做到这一点？我有一个jsfiddle HERE

这个网站让我发布了包含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>

Answer 1

float: left到infops div呢？

Answer 2

您可以对两个div使用display:inline-block

.infoxbox{
     display:inline-block
}

.info{
    display:inline-block;
}

Fiddle

Answer 3

您可以使用display:inline-block。我在演示

中使用了内联样式属性

DEMO

Answer 4

您只需要将float: left用于一方，将float:right用于另一方。

Answer 5

另一种选择是使用表格：

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

Answer 6

.infoxbox{display: inline-block;}
.infops{display: inline-block;}

Answer 7

这就是你想要的吗？

    .infops {float:left;}

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

如何并排放置两个div

7 个答案: